Come funziona il file-based routing nell'App Router?

Question

Accepted Answer

Nell'App Router, la **struttura di cartelle dentro `app/` definisce i tuoi percorsi** — non c'è una configurazione del router da scrivere. Ogni cartella è un segmento URL, e i file speciali al suo interno definiscono cosa renderizza quel segmento. ## Cartelle = segmenti URL ```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) ``` ## I file speciali Ogni cartella può contenere nomi di file riservati, ognuno con un ruolo specifico: ```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) ``` ## Segmenti dinamici ```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" } ``` Le parentesi quadre creano un parametro dinamico passato alla pagina tramite `params`. Variazioni: `[...slug]` (catch-all), `[[...slug]]` (catch-all opzionale). ## Route group e organizzazione ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` Le parentesi tonde creano **route group** per organizzare i file o applicare layout diversi senza influire l'URL. ## Perché è importante Il file-based routing rende la struttura dell'URL ovvia dall'albero dei file — nessuna configurazione del router centrale da mantenere e tenere sincronizzata. Conoscere i nomi di file speciali (`page`, `layout`, `loading`, `error`, `route`) e le convenzioni con parentesi (`[param]`, `[...catchAll]`, `(group)`) è il vocabolario principale per costruire qualsiasi app con App Router.