Como as rotas dinâmicas e generateStaticParams funcionam?

Question

Accepted Answer

**Rotas dinâmicas** usam nomes de pasta com colchetes para corresponder a segmentos de URL variáveis, e **`generateStaticParams`** diz ao Next.js quais páginas pré-renderizar no tempo de compilação (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 — pré-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 } ``` Sem isso, uma rota dinâmica é renderizada sob demanda (SSR). **Com** isso, Next.js pré-gera uma página estática para cada parâmetro retornado na compilação — dando-lhe a velocidade do SSG para um conjunto conhecido de páginas dinâmicas (cada postagem de blog, cada produto). ## Tratamento de parâmetros não na 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 ``` Isso permite que você pré-construa suas páginas principais/mais comuns e ainda atenda (ou retorne 404) o longo cauda. ## Catch-all e parâmetros aninhados ```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 que isso importa Este par é como você gera estaticamente grandes conjuntos de páginas dinâmicas (blogs, catálogos de e-commerce, documentos) para máximo desempenho e SEO, enquanto `dynamicParams` controla o fallback para páginas não construídas com antecedência. Compreender `generateStaticParams` (quais páginas pré-construir) além das opções de cache/`revalidate` é o núcleo de fazer SSG/ISR para conteúdo dinâmico no App Router.