Static Param Pre-generation with generateStaticParams
generateStaticParams replaces Pages Router’s getStaticPaths in the App Router. It runs at build time to define the list of route segment parameters that will be statically prerendered to HTML and RSC Flight files. Routes not returned by generateStaticParams can be statically generated on-demand on the first request or routed to 404 based on dynamicParams configuration.
Learning Objectives
Define route parameters for static prerendering at build time using generateStaticParams.
Configure fallback behavior using dynamicParams (true vs false).
Implement nested generateStaticParams across parent and child layout/page segments.
Avoid duplicate network requests between generateStaticParams and page rendering via memoization.
Prerequisites & Background Knowledge
Why Interviewers Care
Crucial for architecture interviews covering high-scale content sites, e-commerce product catalogs, and documentation platforms.
The Challenge
Explain how generateStaticParams operates during build time. Demonstrate pre-generating static pages for a blog or e-commerce catalog, and explain how export const dynamicParams controls on-demand generation.
Code Architecture & Implementation
1// app/blog/[slug]/page.tsx2import { notFound } from 'next/navigation';34// Control whether unknown slugs are rendered dynamically or return 4045export const dynamicParams = true; // true = ISR/SSR on demand; false = strict 40467// Runs at build time: generates static HTML/RSC for top 100 posts8export async function generateStaticParams() {9 const posts = await fetch('https://api.cms.com/posts?featured=true').then(res => res.json());1011 return posts.map((post: { slug: string }) => ({12 slug: post.slug,13 }));14}1516export default async function BlogPostPage({17 params,18}: {19 params: Promise<{ slug: string }>;20}) {21 const { slug } = await params;22 const post = await fetch(`https://api.cms.com/posts/${slug}`).then(res => res.json());2324 if (!post) {25 notFound();26 }2728 return (29 <article className="prose max-w-3xl mx-auto py-12">30 <h1>{post.title}</h1>31 <div dangerouslySetInnerHTML={{ __html: post.content }} />32 </article>33 );34}
Architectural Explanation
generateStaticParams executes during next build. It returns an array of objects where each key matches a dynamic route segment. For large websites (e.g. 500,000 products), generating every page at build time causes unacceptably long CI/CD build times. The standard architectural pattern is to pre-generate only the top 1,000 most popular items in generateStaticParams, and set dynamicParams = true. The remaining 499,000 items are generated statically on their first request (ISR) and cached for subsequent visitors.
Common Mistakes & Anti-Patterns
Returning objects with incorrect parameter key names that do not match the folder names (e.g. `{ id }` instead of `{ slug }`).
Fetching all 500,000 items into generateStaticParams, causing build-time memory crashes and 4-hour CI pipelines.
Setting dynamicParams = false and wondering why newly published CMS articles return 404 errors.
Interview Follow-Up Traps
Interviewers will ask: "Does fetch() inside generateStaticParams duplicate the fetch() inside page.tsx?" Explain that request memoization ensures the network request executes only once during build.
Frequently Asked Questions
Can generateStaticParams read request headers or cookies?
No. generateStaticParams runs at build time and has no access to incoming HTTP requests.
What happens if generateStaticParams returns an empty array `[]`?
No paths are pre-generated at build time; all paths will be generated dynamically on first request if dynamicParams is true.