Sign in
Skip to solution
mediumFrontend

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

1.1k views
01

Understand the problem

Pre-generating dynamic route pages at build time.

nextjsgeneratestaticparamsssgdynamic-routes
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

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 listed can be generated on-demand and cached, depending on dynamicParams config.

Solution ready — 2 min read

Classified // press E to declassify

04

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)} />;
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 16 of 95 decoded in the Next.js track. One more won't hurt.

Back to track