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 buildbefore 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
getStaticPathswith a simpler API that returns a flat array of params objects .Development behavior: During
next dev,generateStaticParamsis called when navigating to routes, enabling live updates during development .No ISR re-execution: Unlike
getStaticPathswhich could be used with fallback,generateStaticParamsdoes 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 bygenerateStaticParamsare generated on-demand at request time and then cached. This is equivalent tofallback: trueorfallback: 'blocking'in the Pages Router .Disable on-demand generation (false): With
export const dynamicParams = false, any path not included ingenerateStaticParamsreturns 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 letdynamicParams: truehandle 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:
generateStaticParamsruns on the server, so browser APIs likelocalStorageorwindoware 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 .