Im App Router definiert die Ordnerstruktur innerhalb von app/ deine Routen — es gibt keine Router-Konfiguration zu schreiben. Jeder Ordner ist ein URL-Segment, und spezielle Dateien darin definieren, was dieses Segment rendert.
app/
page.tsx → /
about/page.tsx → /about
blog/page.tsx → /blog
blog/[slug]/page.tsx → /blog/:slug (dynamic segment)
shop/(sale)/page.tsx → /shop (route group — parentheses don't add to URL)
Jeder Ordner kann reservierte Dateinamen enthalten, von denen jeder eine spezifische Rolle hat:
page.tsx → the route's UI (REQUIRED to make a segment routable)
layout.tsx → shared wrapper that persists across child routes
loading.tsx → loading UI (auto-wraps the page in <Suspense>)
error.tsx → error boundary for the segment
not-found.tsx→ 404 UI
route.ts → an API endpoint (instead of a page)
// app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything
export default function Post({ params }: { params: { slug: string } }) {
return <h1>Post: {params.slug}</h1>; // params.slug = "hello"
}
Klammern erstellen einen dynamischen Parameter, der an die Seite über params übergeben wird. Variationen: [...slug] (catch-all), [[...slug]] (optional catch-all).
app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL)
Runde Klammern erstellen Route Groups, um Dateien zu organisieren oder unterschiedliche Layouts anzuwenden, ohne die URL zu beeinflussen.
Dateibasiertes Routing macht die URL-Struktur aus dem Dateibaum offensichtlich — keine zentrale Route-Konfiguration zu pflegen und synchron zu halten.
Die speziellen Dateinamen zu kennen (page, layout, loading, error, route) und die Konventionen mit Klammern ([param], [...catchAll], (group)) ist das Kernvokabular zum Aufbauen jeder App-Router-App.