generateStaticParams

Core Idea

Use generateStaticParams em combinação com segmentos dinâmicos para pré-renderizar rotas estaticamente no build, em vez de sob demanda a cada requisição.

Key Concepts

• generateStaticParams(): exportada de page.tsx, layout.tsx ou route.ts; retorna um array de objetos, cada um preenchendo os segmentos dinâmicos de uma rota.
• dynamicParams: config de segmento que controla o que acontece quando uma rota não gerada por generateStaticParams é visitada (404 se false).
• Geração de baixo para cima: o page.js filho pode gerar params para todos os segmentos dinâmicos da rota (pai e filho).
• Geração de cima para baixo: o layout.js pai gera params só do seu próprio segmento; o filho reaproveita via argumento params.
• Com Cache Components: generateStaticParams deve retornar ao menos um param — array vazio causa build error; use placeholder + notFound() se os valores reais não são conhecidos no build.
• next/root-params em generateStaticParams filho: pode ler um root parameter direto pelo getter, sem precisar do argumento params.

Code Examples

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
  return posts.map((post) => ({ slug: post.slug }))
}

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
}

• O que demonstra: gera uma versão estática por post no build a partir de uma lista de slugs.

// Subconjunto no build + resto sob demanda, bloqueando o resto com dynamicParams
export const dynamicParams = false

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
  return posts.slice(0, 10).map((post) => ({ slug: post.slug }))
}

• O que demonstra: dynamicParams = false faz com que paths fora da lista retornem 404 em vez de renderizar sob demanda.

Reference Tables

Rota de exemplo	Tipo de retorno
/product/[id]	{ id: string }[]
/products/[category]/[product]	{ category: string, product: string }[]
/products/[...slug]	{ slug: string[] }[]

Anti-patterns

• Não retornar array (mesmo vazio): se generateStaticParams não retornar array, a rota vira dinâmica em vez de estática.
• Gerar segmento abaixo do atual: um layout.js só pode gerar params do seu próprio segmento e acima, nunca de segmentos filhos.

Key Takeaways

1. Substitui getStaticPaths do Pages Router.
2. Durante ISR (revalidação), generateStaticParams NÃO é chamado de novo.
3. Com Cache Components, array vazio quebra o build — use placeholder + notFound() se necessário.
4. fetch é automaticamente memoizado entre todas as funções generate*, Layouts, Pages e Server Components na mesma requisição.
5. Combine com use cache em Route Handlers para cache ótimo junto de geração estática.

Connects To

• dynamicParams: controla comportamento de rotas fora da lista gerada.
• next/root-params: leitura de parâmetros de rota raiz dentro de generateStaticParams aninhado.
• use cache: usado junto com generateStaticParams em Route Handlers para cache eficiente.