Next.js 14 führt spannende neue Features ein, darunter den App Router, Server Components und verbesserte Performance. In dieser Anleitung führen wir Sie durch die Einrichtung eines neuen Projekts, das dateibasierte Routing-System und den Aufbau Ihrer ersten Seiten mit React Server Components.
Der App Router verwendet dateisystembasiertes Routing, bei dem Ordner Routen definieren. Jede Seite ist standardmäßig eine Server Component – Ihr Komponentencode bleibt auf dem Server und nur das resultierende HTML wird an den Client gesendet. Das reduziert die JavaScript-Bundle-Größe und verbessert die initiale Ladezeit.
Layouts und Templates erleichtern das Teilen von UI über Routen. Eine layout.tsx-Datei umschließt Kind-Routen und bleibt bei der Navigation erhalten, während template.tsx bei jedem Besuch neu gemountet wird. Verwenden Sie Layouts für gemeinsame Header und Footer, und Templates, wenn Sie den State zurücksetzen müssen.
Datenabruf im App Router ist unkompliziert: fetch direkt in Ihren Server Components. Next.js erweitert die native fetch-API mit automatischer Request-Deduplizierung und einem Standard-Cache. Für dynamische Daten nutzen Sie die Segment-Config-Optionen oder rufen cookies() und headers() auf, wo nötig.
Wenn Sie Interaktivität hinzufügen möchten, verwenden Sie die Direktive "use client" am Anfang einer Datei, um eine Client Component zu erstellen. Halten Sie die Client-Grenze so niedrig wie möglich – schieben Sie Client-Komponenten nach unten im Baum, damit der Großteil Ihrer App auf dem Server bleibt und schnell bleibt.
Key Takeaways
- Der App Router verwendet Ordner für Routen; Seiten sind standardmäßig Server Components.
- Layouts bleiben über Routen erhalten; Templates werden bei der Navigation neu gemountet.
- Daten in Server Components fetchen; Next.js dedupliziert und cached automatisch.
- Verwenden Sie "use client" nur wo Interaktivität nötig ist, um Bundles klein zu halten.
