V App Routeru struktura složek uvnitř app/ definuje vaše trasy — není třeba psát konfiguraci routeru. Každá složka je segment URL a speciální soubory v ní definují, co segment vykresluje.
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)
Každá složka může obsahovat vyhrazená jména souborů, každé s určitou rolí:
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"
}
Závorkové závorky vytvářejí dynamický parametr předaný stránce přes params. Varianty: [...slug] (catch-all), [[...slug]] (volitelný catch-all).
app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL)
Závorky vytvářejí skupiny tras pro organizaci souborů nebo použití různých rozložení beze změny URL.
Směrování na základě souborů činí strukturu URL viditelnou ze stromu souborů — není třeba udržovat a synchronizovat centrální konfiguraci tras.
Znalost speciálních jmen souborů (page, layout, loading, error, route) a konvencí závorek ([param], [...catchAll], (group)) je základní slovník pro vytváření jakékoli aplikace s App Routerem.