All 5 Dynamic Routes & Catch-All Segments questions
More in Dynamic Routes & Catch-All Segments
What is a dynamic route in Next.js, and how do you create one? What is a catch-all route segment, and when would you use one? What is an optional catch-all route segment, and how is it different from a regular catch-all segment? How would you handle a very large number of dynamic pages, such as millions of products, without making the build take too long?
Advertisement
Back to results for “Build”
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
All 5 Dynamic Routes & Catch-All Segments questions