Menu

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
  // ...
}

補足：

  • generateStaticParamsで生成されていない動的セグメントにアクセスした際の挙動を制御するには、dynamicParamsセグメント設定オプションを使用できます。
  • ランタイム時にパスを再検証（ISR）するには、generateStaticParamsから空の配列を返すか、export const dynamic = 'force-static'を利用する必要があります。
  • next dev中は、ルートに移動するとgenerateStaticParamsが呼び出されます。
  • next build中は、対応するレイアウトまたはページが生成される前にgenerateStaticParamsが実行されます。
  • 再検証（ISR）中は、generateStaticParamsは再度呼び出されません。
  • generateStaticParamsは、PagesルーターのgetStaticPaths関数を置き換えます。

パラメータ

options.params（オプション）

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

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

戻り値

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

  • オブジェクト内の各プロパティはルートに設定される動的セグメントです。
  • プロパティ名はセグメントの名前、プロパティ値はそのセグメントに設定される値です。
例示ルート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: { 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: { 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: { 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.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 []
}

補足： 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: { 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: { category: string } }) {
  // ...
}

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

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

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

バージョン履歴

バージョン変更点
v13.0.0generateStaticParams を導入。