App Router & Routing

Dateibasiert

Der App Router ist dateibasiert: Die Ordnerstruktur unter app/ ist die Routenstruktur. Ein paar Spezialdateien geben jedem Segment seine Bedeutung.

Die Dateikonventionen

Datei	Rolle
`page.js`	macht ein Segment zu einer aufrufbaren Route
`layout.js`	gemeinsame Hülle, bleibt bei Navigation bestehen
`loading.js`	Ladezustand (Streaming) für das Segment
`error.js`	Fehler-Grenze (Client Component)
`not-found.js`	404-Ansicht

app/
├── layout.js            → Root-Layout (umschließt alles)
├── page.js              → /
└── blog/
    ├── page.js          → /blog
    └── [slug]/
        └── page.js      → /blog/:slug

Dynamische Routen

Eckige Klammern machen ein Segment dynamisch. Der Wert kommt über params – und params ist asynchron, muss also awaitet werden:

// app/blog/[slug]/page.js  →  /blog/mein-beitrag
export default async function Beitrag({ params }) {
    const { slug } = await params;
    return <h1>{slug}</h1>;
}

[slug] – ein Segment
[...slug] – Catch-all (mehrere Segmente)
(gruppe) – Route-Gruppe: gliedert Ordner, ohne die URL zu verändern

Wichtig (Next 15/16): Auch searchParams ist asynchron. Wer noch params.slug direkt liest, bekommt Warnungen – erst await, dann destrukturieren.

Layouts verschachteln

Layouts umschließen ihre Kindsegmente und bleiben bei der Navigation erhalten (kein erneutes Rendern). So teilen sich Routen Header, Navigation und Rahmen – ohne Wiederholung.

Als Nächstes die wichtigste Unterscheidung im App Router: Server- und Client-Components.