generateStaticParams

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

// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
 
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
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の実行中、generateStaticParamsは対応するLayoutまたはPageが生成される前に実行されます。

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

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

Parameters

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[] }[]`

単一の動的セグメント

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

複数の動的セグメント

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

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

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

例

静的レンダリング

ビルド時のすべてのパス

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

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

ビルド時のパスの一部

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

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  // Render the first 10 posts at build time
  return posts.slice(0, 10).map((post) => ({
    slug: post.slug,
  }))
}

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

// All posts besides the top 10 will be a 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'を使用します。

export async function generateStaticParams() {
  return []
}

注意点：ルートが動的にレンダリングされないようにするには、generateStaticParamsから常に配列を返す必要があります。たとえそれが空であってもです。

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つのアプローチがあります。

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

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

// Generate segments for both [category] and [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 }>
}) {
  // ...
}

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

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

// Generate segments for [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が生成する各セグメントに対して1回実行されます。

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

// Generate segments for [product] using the `params` passed from
// the parent segment's `generateStaticParams` function
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 }>
}) {
  // ...
}

params引数は同期的にアクセスでき、親セグメントのparamsのみが含まれることに注意してください。

型補完のために、TypeScriptのAwaitedヘルパーと、Page Props helperまたはLayout Props helperのいずれかを組み合わせて使用できます。

export async function generateStaticParams({
  params: { category },
}: {
  params: Awaited<LayoutProps<'/products/[category]'>['params']>
}) {
  const products = await fetch(
    `https://.../products?category=${category}`
  ).then((res) => res.json())
 
  return products.map((product) => ({
    product: product.id,
  }))
}

注意点：fetchリクエストは、すべてのgenerateプレフィックス関数、Layout、Page、およびServer Component間で同じデータに対して自動的にメモ化されます。fetchが利用できない場合は、Reactのcache関数を使用することができます。

バージョン履歴

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