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 async function Page({ params }) {
  const { slug } = await params
  // ...
}

Good to know:

generateStaticParams で生成されていない動的セグメントが訪問された場合に何が起こるかを制御するために、dynamicParams セグメント設定オプションを使用することができます。

実行時にパスを再検証 (ISR) するためには、generateStaticParams から空の配列を返すか、export const dynamic = 'force-static' を利用しなければなりません。

next dev の間、ルートに移動すると generateStaticParams が呼び出されます。

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

再検証 (ISR) の間、generateStaticParams は再度呼び出されません。

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

パラメーター

options.params (オプション)

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

params オブジェクトには、親 generateStaticParams から埋め込まれた params が含まれ、子セグメント内で params を生成するために使用できます。

戻り値

generateStaticParams は、各オブジェクトが単一ルートの動的セグメントを埋め込んだものを表すオブジェクトの配列を返すべきです。

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

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

単一動的セグメント

TypeScript
JavaScript

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

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

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

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

複数の動的セグメント

TypeScript
JavaScript

app/products/[category]/[product]/page.tsx
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 async function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  const { category, product } = await params
  // ...
}

app/products/[category]/[product]/page.js
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 async function Page({ params }) {
  const { category, product } = await params
  // ...
}

全てを含む動的セグメント

TypeScript
JavaScript

app/product/[...slug]/page.tsx
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 async function Page({ params }: { params: { slug: string[] } }) {
  const { slug } = await params
  // ...
}

app/product/[...slug]/page.js
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 async function Page({ params }) {
  const { slug } = await params
  // ...
}

例

静的レンダリング

ビルド時の全パス

ビルド時にすべてのパスを静的にレンダリングするには、generateStaticParams にパスの完全なリストを提供します。

TypeScript

app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

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

ビルド時のパスのサブセット

ビルド時にパスのサブセットを静的にレンダリングし、残りは実行時に最初に訪問されたときにレンダリングするためには、パスの部分的なリストを返します。

TypeScript

app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  // ビルド時に最初の10件の投稿をレンダリングする
  return posts.slice(0, 10).map((post) => ({
    slug: post.slug,
  }))
}

次に、dynamicParams セグメント設定オプションを使用することで、generateStaticParams で生成されなかった動的セグメントが訪問されたときに何が起こるかを制御できます。

app/blog/[slug]/page.js
// 上位10件以外の投稿は404です
export const dynamicParams = false

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
  const topPosts = posts.slice(0, 10)

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

実行時の全パス

実行時に最初に訪問されたときにすべてのパスを静的にレンダリングするには、空の配列を返します（ビルド時にパスはレンダリングされません）、またはexport const dynamic = 'force-static'を利用します。

app/blog/[slug]/page.js
export async function generateStaticParams() {
  return []
}

Good to know: generateStaticParams からは常に配列を返す必要があります; 空の配列でもです; そうしないと、ルートは動的にレンダリングされます。

app/changelog/[slug]/page.js
export const dynamic = 'force-static'

指定されていないパスのレンダリングを無効にする

指定されていないパスが実行時に静的にレンダリングされるのを防ぐには、ルートセグメントに export const dynamicParams = false オプションを追加します。この設定オプションが使用されると、generateStaticParams によって提供されるパスのみが提供され、指定されていないルートは404もしくは（catch-all ルートの場合には）一致します。

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

現在のレイアウトやページより高位の動的セグメントのためのパラメーターを生成することはできますが、その下には生成できません。例えば、app/products/[category]/[product] ルートが与えられた場合：

app/products/[category]/[product]/page.js は、両方の [category] および [product] のパラメーターを生成できます。
app/products/[category]/layout.js は、[category] のみ パラメーターを生成できます。

複数の動的セグメントを持つルートのためのパラメーターを生成するには、2つのアプローチがあります：

下から上へのパラメーター生成

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

TypeScript
JavaScript

app/products/[category]/[product]/page.tsx
// [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 }
}) {
  // ...
}

app/products/[category]/[product]/page.js
// [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 }) {
  // ...
}

上から下へのパラメーター生成

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

TypeScript
JavaScript

app/products/[category]/layout.tsx
// [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 } }) {
  // ...
}

app/products/[category]/layout.js
// [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によって生成された各セグメントに対して一度実行されます。

子のgenerateStaticParams関数は、親のgenerateStaticParams関数から返されたparamsを利用して、そのセグメントを動的に生成することができます。

TypeScript
JavaScript

app/products/[category]/[product]/page.tsx
// 親セグメントの`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 }
}) {
  // ...
}

app/products/[category]/[product]/page.js
// 親セグメントの`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 }) {
  // ...
}

Good to know: fetch リクエストは、自動的にすべての generate という接頭辞を持つ関数や、サーバーコンポーネント、ページ、レイアウトで同じデータに対してメモ化されます。 fetchが利用不可な場合、Reactcache が使用できます。

バージョン履歴

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

パラメーター​

戻り値​

単一動的セグメント​

複数の動的セグメント​

全てを含む動的セグメント​

例​

静的レンダリング​

ビルド時の全パス​

ビルド時のパスのサブセット​

実行時の全パス​

指定されていないパスのレンダリングを無効にする​

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

下から上へのパラメーター生成​

上から下へのパラメーター生成​

バージョン履歴​