¿Cómo funciona el enrutamiento basado en archivos en el App Router?

Question

Accepted Answer

En el App Router, **la estructura de carpetas dentro de `app/` define tus rutas** — no hay configuración de enrutador que escribir. Cada carpeta es un segmento de URL, y los archivos especiales dentro de ella definen qué renderiza ese segmento. ## Carpetas = segmentos de 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) ``` ## Los archivos especiales Cada carpeta puede contener nombres de archivo reservados, cada uno con un rol específico: ```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) ``` ## Segmentos dinámicos ```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" } ``` Los corchetes crean un parámetro dinámico que se pasa a la página a través de `params`. Variaciones: `[...slug]` (catch-all), `[[...slug]]` (catch-all opcional). ## Grupos de rutas y organización ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` Los paréntesis crean **grupos de rutas** para organizar archivos o aplicar diferentes layouts sin afectar la URL. ## Por qué es importante El enrutamiento basado en archivos hace que la estructura de URL sea obvia desde el árbol de archivos — no hay configuración de rutas central que mantener y sincronizar. Conocer los nombres de archivo especiales (`page`, `layout`, `loading`, `error`, `route`) y las convenciones de corchetes (`[param]`, `[...catchAll]`, `(group)`) es el vocabulario central para construir cualquier aplicación con App Router.