Comment fonctionne le routage basé sur les fichiers dans le App Router ?

Question

Accepted Answer

Dans le App Router, la **structure des dossiers à l'intérieur de `app/` définit vos routes** — il n'y a pas de configuration de routeur à écrire. Chaque dossier est un segment d'URL, et les fichiers spéciaux qu'il contient définissent ce que ce segment affiche. ## Dossiers = segments d'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) ``` ## Les fichiers spéciaux Chaque dossier peut contenir des noms de fichier réservés, chacun ayant un rôle spécifique : ```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) ``` ## Segments dynamiques ```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" } ``` Les crochets créent un paramètre dynamique transmis à la page via `params`. Variations : `[...slug]` (catch-all), `[[...slug]]` (catch-all optionnel). ## Groupes de routes et organisation ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` Les parenthèses créent des **groupes de routes** pour organiser les fichiers ou appliquer des layouts différents sans affecter l'URL. ## Pourquoi c'est important Le routage basé sur les fichiers rend la structure des URL évidente à partir de l'arborescence des fichiers — pas de configuration de routes centralisée à maintenir et à garder synchronisée. Connaître les noms de fichiers spéciaux (`page`, `layout`, `loading`, `error`, `route`) et les conventions de crochets (`[param]`, `[...catchAll]`, `(group)`) est le vocabulaire fondamental de la construction de toute application App Router.