Next.js 8: Rutas dinámicas anidadas y catch-all
easy⏱ 5 mincoursenextjs
[...slug] captura múltiples segmentos
Una carpeta llamada [...slug] es un segmento catch-all: coincide con cualquier cantidad de partes de ruta después de ella, no solo una. app/docs/[...slug]/page.tsx coincide con /docs/a, /docs/a/b, /docs/a/b/c... y params.slug llega como un arreglo, por ejemplo ['a', 'b', 'c'].
// app/docs/[...slug]/page.tsx
export default function DocsPage({ params }: { params: { slug: string[] } }) {
return <p>Path: {params.slug.join(' / ')}</p>;
}
// /docs/guides/routing -> params.slug === ['guides', 'routing']
Los corchetes dobles lo hacen opcional
[...slug] requiere al menos una parte de ruta después de /docs — visitar /docs mismo daría 404. Duplicando los corchetes, [[...slug]], el segmento se vuelve opcional: también coincide con /docs con cero partes, en cuyo caso params.slug es undefined. Úsalo cuando la ruta base (sin partes extra) también deba renderizar.
Construye un breadcrumb desde un arreglo slug
Crea un componente DocsPage que reciba params = { slug } (un arreglo, posiblemente vacío) y lo renderice como un breadcrumb (por ejemplo, "docs / guides / routing"). Agrega botones para algunas rutas predefinidas de distinta longitud, incluyendo una que simule el caso opcional vacío de /docs.