generateStaticParams in Next.js — Prebuilding Dynamic Routes at Build Time

1. What Is generateStaticParams?

generateStaticParams() is a function used with dynamic segments like [slug] or [id] to statically generate routes at build time. It returns an array of objects, each representing a set of parameters for a dynamic route.

2. Basic Examples

Single Dynamic Segment:

// app/product/[id]/page.tsx
export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}

Multiple Segments:

// app/products/[category]/[product]/page.tsx
export function generateStaticParams() {
  return [
    { category: 'a', product: '1' },
    { category: 'b', product: '2' },
    { category: 'c', product: '3' },
  ]
}

Catch-all Segment:

// app/product/[...slug]/page.tsx
export function generateStaticParams() {
  return [
    { slug: ['a', '1'] },
    { slug: ['b', '2'] },
    { slug: ['c', '3'] },
  ]
}

3. Static vs Partial vs Runtime Rendering

Render All Paths at Build Time:

const posts = await fetch('https://.../posts').then(res => res.json())
return posts.map(post => ({ slug: post.slug }))

Render a Subset of Paths:

const posts = await fetch('https://.../posts').then(res => res.json())
return posts.slice(0, 10).map(post => ({ slug: post.slug }))

Restrict Unspecified Paths:

export const dynamicParams = false

Render All Paths at Runtime:

export async function generateStaticParams() {
  return []
}
export const dynamic = 'force-static'

4. Multi-Level Segment Generation

Bottom-Up Approach:

// app/products/[category]/[product]/page.tsx
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then(res => res.json())
  return products.map(p => ({
    category: p.category.slug,
    product: p.id,
  }))
}

Top-Down Approach:

// app/products/[category]/layout.tsx
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then(res => res.json())
  return products.map(p => ({ category: p.category.slug }))
}

Using Parent Params in Child:

export async function generateStaticParams({ params: { category } }) {
  const products = await fetch(`https://.../products?category=${category}`).then(res => res.json())
  return products.map(p => ({ product: p.id }))
}

5. Good to Know

• Runs before Layouts and Pages during build
• Does not re-run during ISR
• Runs on navigation during dev
• fetch is memoized across generate-prefixed functions

Conclusion

generateStaticParams is a powerful tool in Next.js for prebuilding dynamic routes. It improves performance, enables fine-grained control over fallback behavior, and simplifies static generation for complex route structures.