Was ist Next.js und was bietet es zusätzlich zu React?

Question

Accepted Answer

**Next.js** ist ein Full-Stack-React-**Framework**. React selbst ist nur eine UI-Bibliothek — es rendert Komponenten, überlässt aber Routing, Datenabruf, Server-Rendering und Build-Tools dir selbst. Next.js bietet all das out of the box, plus eine Server-Runtime. ## Was React allein nicht bietet (und Next.js hinzufügt) ```text React (library) → Next.js (framework) adds: ────────────────────────────────────────────────── UI rendering only → File-based routing (folders = routes) Client-side rendering → Server rendering (SSR), static generation (SSG), ISR You wire data fetching → Built-in data fetching + caching No backend → API routes / Route Handlers (full-stack) Manual bundling → Zero-config build, code splitting, optimization Manual → next/image (auto-optimized images), next/font ``` ## Ein konkretes Beispiel: Eine Route ist nur eine Datei ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` In reinem React würdest du einen Router installieren, Routes konfigurieren und einen Build einrichten. In Next.js ist die Datei selbst die Route. ## Warum Teams sich dafür entscheiden - **SEO & Performance** — Server-gerendertes HTML bedeutet, dass der Inhalt in der initialen Response enthalten ist (gut für Crawler und schnelles First Paint), anders als eine Client-only React SPA, die eine leere Seite ausliefert und dann hydratisiert. - **Full-Stack in einem Projekt** — Frontend und Backend (API Routes, Server Actions) leben zusammen. - **Production-ready Defaults** — automatische Code-Aufteilung, Bild-/Font-Optimierung, Caching. ## Warum es wichtig ist Next.js ist das beliebteste React-Framework, weil es React von einer UI-Bibliothek in eine vollständige Anwendungsplattform umwandelt — es übernimmt Rendering-Strategie, Routing, Daten und ein Backend, damit du dich auf Features konzentrieren kannst statt auf Boilerplate. Es ist die Standard-Wahl, wenn du SEO, Performance oder Server-seitige Logik mit React brauchst.