generateStaticParams is an App Router function that returns an array of route parameters to statically generate pages at build time instead of on-demand at request time
generateStaticParams is a fundamental function in Next.js App Router used for static site generation (SSG) with dynamic routes. When you have dynamic route segments like [slug] or [id] in your folder structure, this function tells Next.js which specific paths should be pre-rendered as static HTML during the build process. It replaces the Pages Router's getStaticPaths function and works seamlessly with Server Components to generate lightning-fast, SEO-friendly pages .
Build-time execution: Runs during next build before the corresponding pages are generated, creating static HTML files that can be served instantly from a CDN .
Server-side only: Executes exclusively on the server during build, never in the browser, allowing direct database queries and API calls .
Replaces getStaticPaths: In the Pages Router, this function replaces the older getStaticPaths with a simpler API that returns a flat array of params objects .
Development behavior: During next dev, generateStaticParams is called when navigating to routes, enabling live updates during development .
No ISR re-execution: Unlike getStaticPaths which could be used with fallback, generateStaticParams does not run again during ISR revalidation .
The function must return an array of objects, where each object represents the dynamic parameters for one static page. The property names in each object must exactly match your dynamic segment names. For a route like app/products/[category]/[product]/page.tsx, you would return [{ category: 'electronics', product: 'phone' }, { category: 'books', product: 'nextjs' }]. For catch-all routes like app/docs/[...slug]/page.tsx, you return an array with a slug property containing a string array: { slug: ['getting-started', 'installation'] } .
Default behavior (true): When export const dynamicParams = true (or omitted), paths not returned by generateStaticParams are generated on-demand at request time and then cached. This is equivalent to fallback: true or fallback: 'blocking' in the Pages Router .
Disable on-demand generation (false): With export const dynamicParams = false, any path not included in generateStaticParams returns a 404 page. This is ideal for sites with a fixed set of content .
Partial static generation: You can return only a subset of paths from generateStaticParams (like popular products) and let dynamicParams: true handle the rest, balancing build time with coverage .
Always return an array from generateStaticParams, even if empty. An empty array means no pages are pre-rendered at build time, and with dynamicParams: true, all pages are generated on first visit . The function cannot be used in Client Components and must be exported from a Server Component page or layout . When working with multiple dynamic segments, you can generate params from child segments (bottom-up) or use parent params to generate children (top-down) for complex hierarchies .
Using client-side APIs: generateStaticParams runs on the server, so browser APIs like localStorage or window are not available. Accessing them will cause build errors .
Forgetting string conversion: Dynamic params must be strings. If your IDs are numbers, convert them with .toString() .
Empty returns: If your data fetch fails, ensure you still return an array (even empty) and add error handling with try-catch blocks .
Misunderstanding development vs production: The function runs during navigation in development but only at build time in production .
In the Pages Router, you needed both getStaticPaths (to define which paths to generate) and getStaticProps (to fetch data for each path). The App Router simplifies this: generateStaticParams only handles parameter generation, while data fetching happens directly in the Server Component. This eliminates the need for separate data-fetching methods and provides a more intuitive, unified approach to static generation .
0-2 years experience
2-5 years experience
5-8 years experience
8+ years experience
