¿Cómo funcionan las rutas dinámicas y generateStaticParams?

Question

Accepted Answer

**Las rutas dinámicas** utilizan nombres de carpetas entre corchetes para coincidir con segmentos de URL variables, y **`generateStaticParams`** le dice a Next.js cuáles de esas páginas deben pre-renderizarse en el momento de la compilación (para SSG/ISR). ## Segmento dinámico ```tsx // app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything export default async function Post({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); // params.slug is the URL value return

{post.title}

; } ``` ## generateStaticParams — pre-renderizar páginas específicas ```tsx // Tell Next.js the list of slugs to build statically export async function generateStaticParams() { const posts = await getAllPosts(); return posts.map(post => ({ slug: post.slug })); // → builds /blog/post-1, /blog/post-2, ... as static HTML at build time } ``` Sin esto, una ruta dinámica se renderiza bajo demanda (SSR). **Con** esto, Next.js pre-genera una página estática para cada parámetro devuelto en la compilación — dándote la velocidad de SSG para un conjunto conocido de páginas dinámicas (cada publicación de blog, cada producto). ## Manejo de parámetros no incluidos en la lista ```tsx // what happens for a slug NOT returned by generateStaticParams? export const dynamicParams = true; // (default) render unknown slugs on-demand (ISR-like) // export const dynamicParams = false; // return 404 for any slug not pre-built ``` Esto te permite pre-construir tus páginas principales/más comunes y aún servir (o 404) la cola larga. ## Parámetros de catch-all y anidados ```text app/shop/[...categories]/page.tsx → /shop/a/b/c (params.categories = ['a','b','c']) app/[lang]/[slug]/page.tsx → multiple params: { lang, slug } ``` ```tsx export async function generateStaticParams() { return [{ lang: "en", slug: "about" }, { lang: "vi", slug: "about" }]; } ``` ## Por qué es importante Este par es cómo generas estáticamente grandes conjuntos de páginas dinámicas (blogs, catálogos de comercio electrónico, docs) para máximo rendimiento y SEO, mientras que `dynamicParams` controla el fallback para páginas no construidas previamente. Entender `generateStaticParams` (qué páginas pre-construir) más las opciones de almacenamiento en caché/`revalidate` es el núcleo de hacer SSG/ISR para contenido dinámico en el App Router.