Überblick
React trifft Framework
React ist die Bibliothek für Benutzeroberflächen, Next.js das Framework drumherum: Routing, Server-Rendering, Datenladen, Bundling und Deployment aus einem Guss. Diese Doku sammelt die Muster, die im Alltag mit dem App Router wirklich zählen.
Warum Next.js?
Reines React läuft im Browser – jede Seite kommt als JavaScript-Bundle, das erst dort rendert. Next.js verschiebt einen großen Teil auf den Server: schnellere erste Anzeige, weniger Client-JavaScript, gutes SEO und ein klarer Rahmen für Struktur und Datenfluss.
App Router statt Pages Router
Aktuelle Next.js-Projekte nutzen den App Router (Verzeichnis app/). Er baut auf React Server Components auf und ist der Standard – der ältere Pages Router (pages/) existiert weiter, ist aber Legacy.
App Router (app/) | Pages Router (pages/) | |
|---|---|---|
| Basis | Server Components | Client Components |
| Layouts | verschachtelt, dauerhaft | pro Seite |
| Datenladen | direkt in der Komponente | getServerSideProps etc. |
| Status | Standard | Legacy |
Voraussetzungen
- Node.js 18+ und ein Paketmanager
- Grundverständnis von React (Komponenten, JSX, Props)
Der rote Faden
Zuerst das Routing und die Dateikonventionen, dann die zentrale Unterscheidung Server- vs. Client-Component, das Datenladen, Rendering & Streaming und schließlich Metadaten/SEO und Deployment.