generateStaticParams
generateStaticParams
関数は動的ルートセグメントと組み合わせて使用することで、リクエスト時にオンデマンドでルートを生成するのではなく、ビルド時に静的生成することができます。
// [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[] }[] |
単一の動的セグメント
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
// ...
}
複数の動的セグメント
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
// ...
}
キャッチオール動的セグメント
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
に提供します:
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())
// ビルド時に最初の10件の投稿をレンダリング
return posts.slice(0, 10).map((post) => ({
slug: post.slug,
}))
}
そして、dynamicParams
セグメント設定オプションを使用することで、generateStaticParams
で生成されなかった動的セグメントにアクセスした際の動作を制御できます。
// 上位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'
を使用します:
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つのアプローチがあります:
下から上へパラメータを生成する
子ルートセグメントから複数の動的セグメントを生成します。
// [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 }>
}) {
// ...
}
上から下へパラメータを生成する
まず親セグメントを生成し、その結果を使用して子セグメントを生成します。
// [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
を使用して、独自のセグメントを動的に生成できます。
// 親セグメントの`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 が導入されました。 |