generateStaticParams

generateStaticParams 関数は、動的ルートセグメントと組み合わせて使用することで、リクエスト時にオンデマンドで生成する代わりに、ビルド時にルートを静的生成できます。

app/blog/[slug]/page.js

// [slug] 動的セグメントを埋めるための `params` リストを返す
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  return posts.map((post) => ({
    slug: post.slug,
  }))
}

// `generateStaticParams` が返した `params` を使用して
// このページの複数のバージョンが静的に生成されます
export default function Page({ params }) {
  const { slug } = params
  // ...
}

知っておくと良いこと

dynamicParams セグメント設定オプションを使用して、generateStaticParams で生成されなかった動的セグメントにアクセスした時の動作を制御できます。

next dev 実行中は、ルートにナビゲートすると generateStaticParams が呼び出されます。

next build 実行中は、対応するレイアウトやページが生成される前に generateStaticParams が実行されます。

再検証（ISR）中は、generateStaticParams は再度呼び出されません。

generateStaticParams は Pages Router の getStaticPaths 関数を置き換えます。

パラメーター

options.params (オプション)

ルート内の複数の動的セグメントで generateStaticParams を使用する場合、親が生成する各 params セットに対して子の generateStaticParams 関数が1回ずつ実行されます。

params オブジェクトには、親の generateStaticParams から渡された params が含まれており、子セグメントの params を生成するために使用できます。

戻り値

generateStaticParams は、各オブジェクトが単一のルートの動的セグメントを表すオブジェクトの配列を返す必要があります。

オブジェクト内の各プロパティは、ルートの動的セグメントを埋めるためのものです。
プロパティ名はセグメント名、プロパティ値はそのセグメントに埋め込む値です。

ルート例	`generateStaticParams` の戻り値の型
`/product/[id]`	`{ id: string }[]`
`/products/[category]/[product]`	`{ category: string, product: string }[]`
`/products/[...slug]`	`{ slug: string[] }[]`

単一の動的セグメント

export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}

// `generateStaticParams` が返した `params` を使用して
// このページの3つのバージョンが静的に生成されます
// - /product/1
// - /product/2
// - /product/3
export default function Page({ params }: { params: { id: string } }) {
  const { id } = params
  // ...
}

export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}

// `generateStaticParams` が返した `params` を使用して
// このページの3つのバージョンが静的に生成されます
// - /product/1
// - /product/2
// - /product/3
export default function Page({ params }) {
  const { id } = params
  // ...
}

複数の動的セグメント

export function generateStaticParams() {
  return [
    { category: 'a', product: '1' },
    { category: 'b', product: '2' },
    { category: 'c', product: '3' },
  ]
}

// `generateStaticParams` が返した `params` を使用して
// このページの3つのバージョンが静的に生成されます
// - /products/a/1
// - /products/b/2
// - /products/c/3
export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  const { category, product } = params
  // ...
}

export function generateStaticParams() {
  return [
    { category: 'a', product: '1' },
    { category: 'b', product: '2' },
    { category: 'c', product: '3' },
  ]
}

// `generateStaticParams` が返した `params` を使用して
// このページの3つのバージョンが静的に生成されます
// - /products/a/1
// - /products/b/2
// - /products/c/3
export default function Page({ params }) {
  const { category, product } = params
  // ...
}

キャッチオール動的セグメント

export function generateStaticParams() {
  return [{ slug: ['a', '1'] }, { slug: ['b', '2'] }, { slug: ['c', '3'] }]
}

// `generateStaticParams` が返した `params` を使用して
// このページの3つのバージョンが静的に生成されます
// - /product/a/1
// - /product/b/2
// - /product/c/3
export default function Page({ params }: { params: { slug: string[] } }) {
  const { slug } = params
  // ...
}

export function generateStaticParams() {
  return [{ slug: ['a', '1'] }, { slug: ['b', '2'] }, { slug: ['c', '3'] }]
}

// `generateStaticParams` が返した `params` を使用して
// このページの3つのバージョンが静的に生成されます
// - /product/a/1
// - /product/b/2
// - /product/c/3
export default function Page({ params }) {
  const { slug } = params
  // ...
}

例

ルート内の複数動的セグメント

現在のレイアウトやページより上の動的セグメントに対して params を生成できますが、下のセグメントに対しては生成できません。例えば、app/products/[category]/[product] ルートの場合:

app/products/[category]/[product]/page.js は [category] と [product] の両方の params を生成できます。
app/products/[category]/layout.js は [category] の params のみ生成できます。

複数の動的セグメントを持つルートに対して params を生成するには2つの方法があります:

下から上へ params を生成する

子ルートセグメントから複数の動的セグメントを生成します。

// [category] と [product] の両方のセグメントを生成
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())

  return products.map((product) => ({
    category: product.category.slug,
    product: product.id,
  }))
}

export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  // ...
}

// [category] と [product] の両方のセグメントを生成
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())

  return products.map((product) => ({
    category: product.category.slug,
    product: product.id,
  }))
}

export default function Page({ params }) {
  // ...
}

上から下へ params を生成する

まず親セグメントを生成し、その結果を使用して子セグメントを生成します。

// [category] セグメントを生成
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())

  return products.map((product) => ({
    category: product.category.slug,
  }))
}

export default function Layout({ params }: { params: { category: string } }) {
  // ...
}

// [category] セグメントを生成
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())

  return products.map((product) => ({
    category: product.category.slug,
  }))
}

export default function Layout({ params }) {
  // ...
}

子ルートセグメントの generateStaticParams 関数は、親の generateStaticParams が生成する各セグメントに対して1回ずつ実行されます。

子の generateStaticParams 関数は、親の generateStaticParams 関数から返された params を使用して、自身のセグメントを動的に生成できます。

// 親セグメントの `generateStaticParams` 関数から渡された `params` を使用して
// [product] セグメントを生成
export async function generateStaticParams({
  params: { category },
}: {
  params: { category: string }
}) {
  const products = await fetch(
    `https://.../products?category=${category}`
  ).then((res) => res.json())

  return products.map((product) => ({
    product: product.id,
  }))
}

export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  // ...
}

// 親セグメントの `generateStaticParams` 関数から渡された `params` を使用して
// [product] セグメントを生成
export async function generateStaticParams({ params: { category } }) {
  const products = await fetch(
    `https://.../products?category=${category}`
  ).then((res) => res.json())

  return products.map((product) => ({
    product: product.id,
  }))
}

export default function Page({ params }) {
  // ...
}

知っておくと良いこと: fetch リクエストは、generateMetadata、generateStaticParams、レイアウト、ページ、サーバーコンポーネント間で同じデータに対して自動的にメモ化されます。fetch が利用できない場合、React の cache を使用できます。

バージョン履歴

バージョン	変更内容
`v13.0.0`	`generateStaticParams` が導入されました。

On this page