Next.js - generateStaticParams() Function

---

---

The generateStaticParams() Function

The Next.js generateStaticParams() function used to statically generate routes at build time instead of on-demand at request time. This function is helpful, when you have a large number of dynamic routes that need to be pre-rendered and you want to optimize performance by generating them at build time.

Syntax

Following is the syntax of generateStaticParams() function:

export async function generateStaticParams(options.params) {
    const posts = await fetch('link/to/api').then(
                        (res) => res.json()
                     )
    
    return posts.map((post) => ({
        slug: post.slug,
    }))
}

Parameters

The generateStaticParams() function takes 'options.params' as an optional parameter. The params object contains the populated params from the parent generateStaticParams, which can be used to generate the params in a child segment.

Return Value

The generateStaticParams() function returns an array of objects, where each object represents the populated dynamic segments of a single route. Each property in the object is a dynamic segment to be filled in for the route. The properties name is the segment's name, and the properties value is what that segment should be filled in with.

Example 1

In the example below, we have a single dynamic segment in the route /product/[id]. The generateStaticParams() function returns an array of objects, where each object represents the populated dynamic segments of a single route. In this case, the object contains the id of the product.

export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}
 
// Three versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
// - /product/1
// - /product/2
// - /product/3
export default async function Page({
  params,
}: {
  params: Promise
}) {
  const { id } = await params
  // ...
}

Example 2

In the example below, we have multiple dynamic segments in the route /products/[category]/[product]. The generateStaticParams() function returns an array of objects, where each object represents the populated dynamic segments of a single route. In this case, the object contains the category and product of the product.

export function generateStaticParams() {
  return [
    { category: 'a', product: '1' },
    { category: 'b', product: '2' },
    { category: 'c', product: '3' },
  ]
}
 
// Three versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
// - /products/a/1
// - /products/b/2
// - /products/c/3
export default async function Page({
  params,
}: {
  params: Promise
}) {
  const { category, product } = await params
  // ...
}

Example 3

In the example below, we have a catch-all dynamic segment in the route /products/[...slug]. The generateStaticParams() function returns an array of objects, where each object represents the populated dynamic segments of a single route. In this case, the object contains the slug of the product.

export function generateStaticParams() {
  return [{ slug: ['a', '1'] }, { slug: ['b', '2'] }, { slug: ['c', '3'] }]
}
 
// Three versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
// - /product/a/1
// - /product/b/2
// - /product/c/3
export default async function Page({
  params,
}: {
  params: Promise
}) {
  const { slug } = await params
  // ...
}