Next.js › Dynamic Routes & Catch-All Segments

How do you pre-generate static pages for dynamic routes at build time using generateStaticParams?

Advanced

Answer

You export a generateStaticParams function from your dynamic route's page file that returns an array of parameter objects, and Next.js will use these to build a separate static page for each set of parameters ahead of time, rather than waiting to generate them on demand when a user first visits.

export async function generateStaticParams() {
  const products = await getAllProducts();
  return products.map(product => ({ id: product.id }));
}

export default async function ProductPage({ params }) {
  const { id } = await params;
  const product = await getProduct(id);
  return <h1>{product.name}</h1>;
}

Real-world example An online catalog pre-builds static pages for every product at build time using generateStaticParams, giving visitors extremely fast page loads since the pages are already fully generated ahead of time.

Common follow-ups: What happens to routes not included in generateStaticParams when a user visits them?;How does this interact with Incremental Static Regeneration?

Rendering (SSR/SSG/ISR);On-Demand Revalidation Strategies