mediumFrontend

What is generateStaticParams in Next.js and how does it enable SSG for dynamic routes?

Q: What is generateStaticParams in Next.js and how does it enable SSG for dynamic routes?

**TL;DR.** generateStaticParams returns the list of **param values** (e.g. all blog slugs) so Next.js **statically pre-renders** those dynamic-route pages at **build time**. Params not in the list can be generated **on demand** and cached, controlled by dynamicParams . generateStaticParams returns [{slug:'a'},…] build time /blog/a, /blog/b … prerendered <marker

1.1k views

Understand the problem

Pre-generating dynamic route pages at build time.

nextjsgeneratestaticparamsssgdynamic-routes

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Prerender all blog slugs at build

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((p) => ({ slug: p.slug }));   // one static page each
}
export const dynamicParams = true;   // unlisted slugs render on-demand + cache

export default async function Post({ params }) {
  const { slug } = await params;
  return <Article post={await getPost(slug)} />;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the difference between Server Components and Client Components in Next.js?

What is next/script and what are its strategy options in Next.js?