Der App Router ist das neue Paradigma für Next.js-Anwendungen und revolutioniert die Art, wie wir React-Apps strukturieren. In diesem Tutorial zeige ich dir alle wichtigen Konzepte von Server Components bis hin zu fortgeschrittenen Patterns, die ich täglich in Produktionsprojekten einsetze.

Was ist der Next.js App Router?

Der App Router wurde mit Next.js 13 eingeführt und ersetzt den traditionellen Pages Router. Er basiert auf React Server Components und bietet ein neues File-System-basiertes Routing mit verschachtelten Layouts, Streaming und verbesserten Data Fetching Patterns.

Vorteile des App Routers

React Server Components: Weniger JavaScript im Browser
Nested Layouts: Persistente UI-Elemente über Routen hinweg
Streaming: Progressive Rendering mit Suspense
Colocation: Styles, Tests und Components nahe der Route
Partial Prerendering: Statische und dynamische Inhalte kombinieren

Projektstruktur mit App Router

Die Ordnerstruktur im app-Verzeichnis definiert deine Routen. Jeder Ordner entspricht einem URL-Segment, spezielle Dateien wie page.tsx, layout.tsx und loading.tsx haben vordefinierte Funktionen.

plaintext

app/
├── layout.tsx          # Root Layout
├── page.tsx            # Homepage (/)
├── globals.css
├── blog/
│   ├── layout.tsx      # Blog Layout
│   ├── page.tsx        # Blog Listing (/blog)
│   └── [slug]/
│       ├── page.tsx    # Blog Post (/blog/slug)
│       └── loading.tsx # Loading State
├── api/
│   └── route.ts        # API Route
└── (marketing)/
    └── about/
        └── page.tsx    # About Page (/about)

Server Components vs Client Components

Im App Router sind alle Components standardmäßig Server Components. Sie werden auf dem Server gerendert und senden kein JavaScript an den Browser. Client Components werden mit der Direktive use client markiert und ermöglichen Interaktivität.

Server Component Beispiel

In Server Components kannst du direkt auf Datenbanken zugreifen, ohne einen API-Call zu machen. Das vereinfacht die Architektur erheblich und verbessert die Performance.

Client Component Beispiel

Client Components nutzen useState, useEffect und andere React-Hooks für Interaktivität. Markiere sie mit use client am Dateianfang.

Tipp

Halte Client Components so klein wie möglich. Extrahiere nur die interaktiven Teile in separate Client Components und behalte den Rest als Server Components.

Layouts und Templates

Layouts umhüllen untergeordnete Routen und bleiben beim Navigation erhalten. Sie eignen sich perfekt für Navigation, Sidebar und Footer. Templates werden bei jeder Navigation neu gemountet und eignen sich für Animationen.

Data Fetching im App Router

Der App Router vereinfacht Data Fetching erheblich. In Server Components kannst du direkt async/await verwenden, Datenbanken abfragen oder APIs aufrufen. Next.js erweitert fetch automatisch um Caching und Revalidierung.

Caching-Strategien

Statisch gecacht: Standard-Verhalten für bessere Performance
Revalidierung: Daten nach bestimmter Zeit neu laden
Kein Cache: Immer frische Daten bei jedem Request

Loading States und Streaming

Mit loading.tsx definierst du Loading States für Routen-Segmente. React Suspense ermöglicht Streaming, sodass Teile der Seite sofort angezeigt werden, während andere noch laden.

Error Handling mit error.tsx

Error Boundaries werden durch error.tsx definiert und fangen Fehler in Routen-Segmenten ab. Sie müssen Client Components sein und bieten Reset-Funktionalität.

Server Actions für Formulare

Server Actions ermöglichen Formular-Handling ohne API-Routes. Sie werden mit use server markiert und laufen ausschließlich auf dem Server. Das vereinfacht die Implementierung von Formularen erheblich.

Route Handlers für APIs

Route Handlers ersetzen API Routes aus dem Pages Router. Sie unterstützen alle HTTP-Methoden und können sowohl statisch als auch dynamisch sein.

Best Practices für Produktion

Nutze Server Components wo immer möglich
Implementiere Loading und Error States für jede Route
Verwende generateStaticParams für statische Generierung
Setze Metadata für SEO-Optimierung
Aktiviere Partial Prerendering für beste Performance

Fazit

Der Next.js App Router ist die Zukunft der React-Entwicklung. Die Kombination aus Server Components, Streaming und vereinfachtem Data Fetching ermöglicht performante Anwendungen mit exzellenter Developer Experience. Starte jetzt mit dem App Router und profitiere von modernem React.

Next.js App Router: Das komplette Tutorial für Server Components