Hvordan fungerer filbaseret routing i App Router?

Question

Accepted Answer

I App Router definerer **mappestrukturen inden for `app/`** dine ruter — der er ingen router-konfiguration at skrive. Hver mappe er et URL-segment, og specielle filer inden i den definerer, hvad det segment renderes. ## Mapper = URL-segmenter ```text 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) ``` ## De specielle filer Hver mappe kan indeholde reserverede filnavne, hver med en specifik rolle: ```text 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 ) error.tsx → error boundary for the segment not-found.tsx→ 404 UI route.ts → an API endpoint (instead of a page) ``` ## Dynamiske segmenter ```tsx // app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything export default function Post({ params }: { params: { slug: string } }) { return

Post: {params.slug}

; // params.slug = "hello" } ``` Kvadratiske parenteser opretter en dynamisk parameter, der sendes til siden via `params`. Variationer: `[...slug]` (catch-all), `[[...slug]]` (valgfrit catch-all). ## Route-grupper og organisation ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` Parenteser opretter **route-grupper** til at organisere filer eller anvende forskellige layouts uden at påvirke URL'en. ## Hvorfor det betyder noget Filbaseret routing gør URL-strukturen indlysende fra filtræet — ingen central route-konfiguration at vedligeholde og holde synkroniseret. At kende de specielle filnavne (`page`, `layout`, `loading`, `error`, `route`) og bracket-konventionerne (`[param]`, `[...catchAll]`, `(group)`) er kernefokabulariet for at bygge enhver App Router-app.