W App Router struktura folderów wewnątrz app/ definiuje Twoje ścieżki — nie ma konfiguracji routera do napisania. Każdy folder to segment URL, a specjalne pliki w nim definiują, co ten segment renderuje.
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żdy folder może zawierać zarezerwowane nazwy plików, każdy z określoną 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"
}
Nawiasy kwadratowe tworzą parametr dynamiczny przekazywany do strony poprzez params. Warianty: [...slug] (catch-all), [[...slug]] (opcjonalny catch-all).
app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL)
Nawiasy zwykłe tworzą grupy ścieżek do organizowania plików lub stosowania różnych layoutów bez wpływu na URL.
Routing oparty na plikach czyni strukturę URL oczywistą z drzewa plików — brak centralnej konfiguracji routera do utrzymania i synchronizacji.
Znajomość specjalnych nazw plików (page, layout, loading, error, route) i konwencji nawiasów ([param], [...catchAll], (group)) to podstawowy słownictwo do budowania dowolnej aplikacji App Router.