Todas las convenciones de archivos y carpetas del App Router en una tabla con buscador, un probador que convierte la ruta de un archivo de app/ en su URL y código verificado para layout, loading y error.
En el App Router, las carpetas dentro de app/ se convierten en segmentos de URL y los archivos especiales dan a cada segmento su UI: page lo hace público, layout lo envuelve, loading añade un fallback de Suspense, error añade un error boundary y route sirve una API. Los corchetes hacen dinámicos los segmentos, los paréntesis agrupan rutas sin cambiar la URL y un guion bajo oculta una carpeta.
Los archivos que más vas a escribir
Los hilos de foros sobre el App Router preguntan sobre todo dónde va un archivo y por qué no se detecta. Esta chuleta responde a eso directamente: busca en las convenciones, escribe la ruta de un archivo para ver la URL que genera y copia versiones mínimas de los archivos, todo verificado con la documentación actual de nextjs.org.
Un layout se mantiene montado cuando te mueves entre sus páginas hijas, así que el estado y los efectos persisten. Un archivo template se sitúa justo dentro del layout y se vuelve a renderizar al navegar, lo que encaja con efectos que deben ejecutarse en cada cambio de página.
O le falta la línea 'use client', ya que los error boundaries deben ser Client Components, o el error ocurre en el layout del mismo segmento, que error.tsx no envuelve. Los errores del root layout necesitan global-error.
error, un objeto Error con un digest opcional, y retry, que vuelve a obtener los datos y renderiza de nuevo el segmento. La documentación dice que retry pasó a estable en la versión 16.3. reset sigue existiendo para limpiar el error sin volver a obtener datos, pero retry es la opción habitual.
Una carpeta con guion bajo es privada y el enrutado la ignora. Para tener un segmento de URL real que empiece por guion bajo, nombra la carpeta con %5F, la forma codificada, por ejemplo %5Fdrafts.
En la versión 16, la convención de archivo middleware quedó obsoleta y pasó a llamarse proxy, así que los proyectos nuevos usan proxy.ts en la raíz del proyecto (o dentro de src) exportando una función proxy. Next.js incluye un codemod, middleware-to-proxy, que renombra el archivo y la función.
Archivos, carpetas y archivos de metadatos
Obligatorio, y el único lugar donde se escriben html y body. Cada página se renderiza donde va children.
params es una Promise, así que la página es async y la espera con await antes de usar slug.
Se muestra en cuanto navegas mientras la página llega por streaming. No recibe props.
Debe ser un Client Component. retry vuelve a obtener los datos y renderiza de nuevo el segmento.
Sustituye al root layout mientras está activo, así que trae su propio html y body y no puede exportar metadata.
Archivo
UI compartida para un segmento y sus hijos; se mantiene montada
Archivo
UI de una ruta; hace público el segmento
Archivo
Fallback de Suspense para el segmento
Archivo
UI que se muestra con notFound() y con URLs sin coincidencia
Archivo
Error boundary; Client Component
Archivo
UI de error para el root layout; con su propio html y body
Archivo
Endpoint de API; solo .js o .ts
Archivo
Como un layout, pero se vuelve a renderizar al navegar
Archivo
Fallback para un slot de ruta paralela
Archivo
UI para forbidden()
Archivo
UI para unauthorized()
Archivo raíz
Proxy de peticiones en la raíz del proyecto
Archivo raíz
Configuración de OpenTelemetry e instrumentación
Carpeta
Un segmento de URL
Carpeta
Segmento dinámico
Carpeta
Segmento catch-all, una o más partes
Carpeta
Catch-all opcional, también coincide con el padre
Carpeta
Grupo de rutas, excluido de la URL
Carpeta
Carpeta privada, ignorada por el enrutado
Carpeta
Slot con nombre para rutas paralelas
Carpeta
Intercepta una ruta del mismo nivel
Carpeta
Intercepta una ruta un nivel por encima
Carpeta
Intercepta una ruta dos niveles por encima
Carpeta
Intercepta una ruta desde la raíz de app
Metadatos
Iconos de la app, como imágenes o generados con código
Metadatos
Imágenes para compartir, como archivos o generadas
Metadatos
sitemap.xml y robots.txt, estáticos o generados
Escribe la ruta de un archivo dentro de app/. El probador quita los grupos de rutas, lee los segmentos dinámicos y te dice el patrón de URL, o por qué el archivo no es una ruta.
Ruta del archivo
Busca en las convenciones
Buscar
error, slot, group
Filtrar por tipo
Todos
{n} mostrados
Escribe una ruta como app/blog/[slug]/page.tsx
No es una ruta: una carpeta que empieza por _ es privada.
No es una ruta pública. {file} es un archivo especial que envuelve la ruta de esta carpeta.
No es una ruta pública. {file} es un archivo colocado junto a la ruta y nunca se sirve.
los archivos route deben ser .js o .ts.
{d} es un grupo de rutas, excluido de la URL
{d} es un slot de ruta paralela, no un segmento de URL
{d} también coincide con la ruta padre
{d} es una ruta de intercepción
Endpoint de API en {url}
Página en {url}
Empieza gratis · Sin tarjeta de crédito