generateStaticParams

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

app/blog/[slug]/page.tsx

TypeScript

// [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,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  // ...
}

補足:

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

実行時にパスを再検証する(ISR)ためには、generateStaticParamsから空の配列を返すか、export const dynamic = 'force-static'を使用する必要があります。

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

next buildの実行中は、対応するLayoutやPageが生成される前にgenerateStaticParamsが実行されます。

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

generateStaticParamsはPages RouterのgetStaticPaths関数に代わるものです。

パラメータ

options.params (オプション)

ルート内の複数の動的セグメントがgenerateStaticParamsを使用する場合、子のgenerateStaticParams関数は親が生成するparamsのセットごとに一度実行されます。

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

戻り値

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

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

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

単一の動的セグメント

app/product/[id]/page.tsx

TypeScript

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: Promise<{ id: string }>
}) {
  const { id } = await params
  // ...
}

複数の動的セグメント

app/products/[category]/[product]/page.tsx

TypeScript

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: Promise<{ category: string; product: string }>
}) {
  const { category, product } = await params
  // ...
}

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

app/product/[...slug]/page.tsx

TypeScript

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: Promise<{ slug: string[] }>
}) {
  const { slug } = await params
  // ...
}

例

静的レンダリング

ビルド時にすべてのパスを生成

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

app/blog/[slug]/page.tsx

TypeScript

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

ビルド時に一部のパスを生成

ビルド時に一部のパスを静的にレンダリングし、残りを初めてアクセスされたときに実行時にレンダリングするには、部分的なパスリストを返します：

app/blog/[slug]/page.tsx

TypeScript

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.tsx

TypeScript

// 上位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 []
}

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

app/changelog/[slug]/page.js

export const dynamic = 'force-static'

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

指定されていないパスが実行時に静的にレンダリングされないようにするには、ルートセグメントにexport const dynamicParams = falseオプションを追加します。この設定オプションを使用すると、generateStaticParamsによって提供されたパスのみが処理され、指定されていないルートは404エラーになるか、(キャッチオールルートの場合は)マッチします。

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

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

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

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

下から上へパラメータを生成する

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

app/products/[category]/[product]/page.tsx

TypeScript

// [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: Promise<{ category: string; product: string }>
}) {
  // ...
}

上から下へパラメータを生成する

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

app/products/[category]/layout.tsx

TypeScript

// [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: Promise<{ category: string }>
}) {
  // ...
}

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

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

app/products/[category]/[product]/page.tsx

TypeScript

// 親セグメントの`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: Promise<{ category: string; product: string }>
}) {
  // ...
}

補足: fetchリクエストは、すべてのgenerateプレフィックス関数、レイアウト、ページ、サーバーコンポーネント間で同じデータに対して自動的にメモ化されます。fetchが利用できない場合は、Reactcacheを使用できます。

バージョン履歴

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