Empty generateStaticParams with Cache Components
Why This Error Occurred
You're usingCache Components in your Next.js application, and one of yourgenerateStaticParams functions returned an empty array, which causes a build error.
When Cache Components is enabled, Next.js performs build-time validation to ensure your routes can be properly prerendered without runtime dynamic access errors. IfgenerateStaticParams returns an empty array, Next.js cannot validate that your route won't access dynamic values (likeawait cookies(),await headers(), orawait searchParams) at runtime, which would cause errors.
This strict requirement ensures:
- Build-time validation catches potential runtime errors early
- All routes using Cache Components have at least one static variant to validate against
- You don't accidentally deploy routes that will fail at runtime
Possible Ways to Fix It
Option 1: Return at least one static param
Modify yourgenerateStaticParams function to return at least one set of parameters. This is the most common fix and allows build-time validation to work properly.
// This will cause an error with Cache ComponentsexportasyncfunctiongenerateStaticParams() {return []// Empty array not allowed}// Return at least one sample paramexportasyncfunctiongenerateStaticParams() {return [{ slug:'hello-world' }, { slug:'getting-started' }]}These samples serve dual purposes:
- Build-time validation: Verify your route structure is safe
- Prerendering: Generate instant-loading pages for popular routes
The build process only validates code paths that execute with your sample params. If runtime parameters trigger conditional logic that renders branches accessing runtime APIs (likecookies()) without Suspense, or dynamic content without Suspense oruse cache, those will cause runtime errors.
Option 2: Use a placeholder param
If you don't know actual values at build time, you can use a placeholder for validation. However, this defeats the purpose of build-time validation and should be avoided:
exportasyncfunctiongenerateStaticParams() {// Placeholder only validates one code pathreturn [{ slug:'__placeholder__' }]}exportdefaultasyncfunctionPage({ params,}: { params:Promise<{ slug:string }>}) {const {slug }=await params// Handle placeholder caseif (slug==='__placeholder__') {notFound() }// Real params may trigger code paths// that access dynamic APIs incorrectly, causing// runtime errors that cannot be caught by error boundariesconstpost=awaitgetPost(slug)return <div>{post.title}</div>}Using placeholders provides minimal build-time validation and increases the risk of runtime errors for actual parameter values.
Useful Links
Was this helpful?