Hur fungerar filbaserad routing i App Router?

Question

Accepted Answer

I App Router **definierar mappstrukturen i `app/` dina routes** — det finns ingen routerkonfiguration att skriva. Varje mapp är ett URL-segment, och speciella filer i den definierar vad segmentet renderar. ## Mappar = URL-segment ```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 speciella filerna Varje mapp kan innehålla reserverade filnamn, var och en med en specifik roll: ```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) ``` ## Dynamiska segment ```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" } ``` Fyrkantiga hakparenteser skapar en dynamisk parameter som skickas till sidan via `params`. Variationer: `[...slug]` (catch-all), `[[...slug]]` (optional catch-all). ## Route-grupper och organisation ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` Vänsterparentes skapar **route-grupper** för att organisera filer eller använda olika layouts utan att påverka URL:en. ## Varför det är viktigt Filbaserad routing gör URL-strukturen uppenbar från filträdet — ingen central routerkonfiguration att underhålla och hålla synkroniserad. Att kunna de speciella filnamnen (`page`, `layout`, `loading`, `error`, `route`) och konventionerna för hakparenteser (`[param]`, `[...catchAll]`, `(group)`) är kärnvokabulären för att bygga någon App Router-app.