メインコンテンツまでスキップ

Dynamic Routes

事前にセグメント名が正確にわからず、動的なデータからルートを作成したい場合は、リクエスト時に埋め込まれるDynamic Segmentsを使用するか、またはビルド時に事前レンダリングすることができます。

規約

Dynamic Segmentは、フォルダー名を角括弧で囲むことで作成できます: [folderName]。例えば、[id][slug]です。

Dynamic Segmentsは、レイアウトページルート、およびgenerateMetadata関数にparamsプロップとして渡されます。

例えば、ブログは次のようなルートを含むことができます:app/blog/[slug]/page.js。ここで、[slug]はブログ投稿のためのDynamic Segmentです。

app/blog/[slug]/page.tsx
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const slug = (await params).slug
return <div>My Post: {slug}</div>
}
ルート例のURLparams
app/blog/[slug]/page.js/blog/a{ slug: 'a' }
app/blog/[slug]/page.js/blog/b{ slug: 'b' }
app/blog/[slug]/page.js/blog/c{ slug: 'c' }

セグメントのパラメーターを生成する方法については、generateStaticParams()ページをご覧ください。

Good to know

  • paramsプロップはPromiseであるため、async/awaitまたはReactのuse関数を使用して値にアクセスする必要があります。
    • バージョン14以前では、paramsは同期プロップでした。後方互換性を考慮して、Next.js 15ではまだ同期的にアクセス可能ですが、この動作は今後廃止される予定です。
  • Dynamic Segmentsは、pagesディレクトリのDynamic Routesに相当します。

Generating Static Params

generateStaticParams関数は、dynamic route segmentsと組み合わせて使用することで、リクエスト時ではなくビルド時に静的に生成することができます。

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,
}))
}

generateStaticParams関数の主な利点は、そのデータの賢い取得にあります。generateStaticParams関数内でfetchリクエストを使用してコンテンツを取得すると、リクエストは自動的にメモ化されるため、同じ引数を持つfetchリクエストは複数のgenerateStaticParams、レイアウト、およびページにわたって一度だけ行われ、ビルド時間が短縮されます。

pagesディレクトリから移行する場合は、移行ガイドを使用してください。

詳細情報と高度な使用例については、generateStaticParamsサーバー関数ドキュメントをご覧ください。

Catch-all Segments

Dynamic Segmentsは、角括弧内に省略記号を追加することで、後続のすべてのセグメントをキャッチオール段階に拡張できます:[...folderName]

例えば、app/shop/[...slug]/page.js/shop/clothesだけでなく、/shop/clothes/tops/shop/clothes/tops/t-shirtsなどにも一致します。

ルート例のURLparams
app/shop/[...slug]/page.js/shop/a{ slug: ['a'] }
app/shop/[...slug]/page.js/shop/a/b{ slug: ['a', 'b'] }
app/shop/[...slug]/page.js/shop/a/b/c{ slug: ['a', 'b', 'c'] }

Optional Catch-all Segments

Catch-all Segmentsは、ダブルスクエアブラケットでパラメータを囲むことでオプションにすることができます:[[...folderName]]

例えば、app/shop/[[...slug]]/page.jsは、/shopだけでなく、/shop/clothes/shop/clothes/tops/shop/clothes/tops/t-shirtsにも一致します。

キャッチオールオプショナルキャッチオールセグメントの違いは、オプショナルの場合、パラメータなしのルートも一致することです(上記の例では/shop)。

ルート例のURLparams
app/shop/[[...slug]]/page.js/shop{ slug: undefined }
app/shop/[[...slug]]/page.js/shop/a{ slug: ['a'] }
app/shop/[[...slug]]/page.js/shop/a/b{ slug: ['a', 'b'] }
app/shop/[[...slug]]/page.js/shop/a/b/c{ slug: ['a', 'b', 'c'] }

TypeScript

TypeScriptを使用する場合、構成されたルートセグメントに応じてparamsの型を追加することができます。

app/blog/[slug]/page.tsx
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
return <h1>My Page</h1>
}
ルートparamsの型定義
app/blog/[slug]/page.js{ slug: string }
app/shop/[...slug]/page.js{ slug: string[] }
app/shop/[[...slug]]/page.js{ slug?: string[] }
app/[categoryId]/[itemId]/page.js{ categoryId: string, itemId: string }

Good to know: 将来的にTypeScriptプラグインによって自動的に行われるかもしれません。