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?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block names the version it ran on. ## 1. Why This Even Matters — A Story First A caterer knows the regular orders for tomorrow and prepares them tonight. If a walk-in customer orders something else, the kitchen can either make it fresh and keep the recipe ready for the next person (dynamicParams true), or say "sorry, only the prepared menu today" (dynamicParams false). generateStaticParams is the list of dishes prepared the night before. ## 2. The Core Idea 📌 **Interview term: generateStaticPar

The problem

Question presented to candidate: "You have app/products/[id]/page.tsx and 50,000 products. What does generateStaticParams do, what happens to an id you did not list, and how would you split the work between build time and runtime?"

What a strong answer should cover:

generateStaticParams returns the list of params to prerender at build time for a dynamic segment; the build shows them with the ● symbol.
It replaces getStaticPaths from the Pages Router.
By default (dynamicParams = true) other values are rendered on first request and then cached.
With dynamicParams = false, values not in the list return 404.
Returning a subset (or an empty array) trades build time for a first-visit render; fetches inside it are memoized with the page.

Clarifying questions expected:

"Which pages get most of the traffic?" — those are worth prerendering.
"Can valid ids appear after the build?" — then dynamicParams must stay true.

Code / implementation expected: Yes — a subset list plus the dynamicParams switch.

nextjs
generatestaticparams
ssg
dynamic-routes

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block names the version it ran on.

1. Why This Even Matters — A Story First

A caterer knows the regular orders for tomorrow and prepares them tonight. If a walk-in customer orders something else, the kitchen can either make it fresh and keep the recipe ready for the next person (dynamicParams true), or say "sorry, only the prepared menu today" (dynamicParams false). generateStaticParams is the li

The solution is hidden so you can try first

6 min read · 8 sections

Read the code

Prerender the top products, render the rest on demand

// app/products/[id]/page.tsx
export const revalidate = 86400;
// export const dynamicParams = false;   // uncomment to 404 anything not listed

export async function generateStaticParams() {
  const top = await fetch("https://api.example.com/products?top=500").then((r) => r.json());
  return top.map((p: { id: number }) => ({ id: String(p.id) }));
}

export default async function Product({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await fetch(`https://api.example.com/products/${id}`).then((r) => r.json());
  return <h1>{product.name}</h1>;
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.