ダイナミックルートセグメント

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

規約

ダイナミックセグメントは、フォルダ名を角括弧で囲むことで作成できます: [folderName]。例えば、ブログでは app/blog/[slug]/page.js というルートを含めることができ、[slug] はブログ投稿のダイナミックセグメントです。

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <div>My Post: {slug}</div>
}

ダイナミックセグメントは layout、page、route、generateMetadata 関数に params プロップとして渡されます。

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

ダイナミックセグメントは、括弧内に省略記号を追加することで、後続のセグメントをキャッチオールするように拡張できます [...folderName]。

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

オプショナルキャッチオールセグメント

キャッチオールセグメントは、パラメータを二重角括弧で囲むことでオプショナルにできます: [[...folderName]]。

例えば、app/shop/[[...slug]]/page.js は /shop/clothes、/shop/clothes/tops、/shop/clothes/tops/t-shirts に加えて、/shop にもマッチします。

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

TypeScript

TypeScriptを使用する場合、設定したルートセグメントに応じて params の型を追加できます。

動作

• params プロップはPromiseであるため、値にアクセスするには async/await またはReactのuse関数を使用する必要があります。
  • バージョン14以前では、params は同期プロップでした。後方互換性のために、Next.js 15でも同期的にアクセスできますが、この動作は将来非推奨になります。

例

generateStaticParams と一緒に使用

generateStaticParams 関数を使用すると、リクエスト時にオンデマンドで生成する代わりに、ビルド時にルートを静的生成できます。

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  return posts.map((post) => ({
    slug: post.slug,
  }))
}

generateStaticParams 関数内で fetch を使用すると、リクエストは自動的に重複排除されます。これにより、レイアウト、ページ、その他の generateStaticParams 関数に対して同じデータの複数のネットワーク呼び出しが回避され、ビルド時間が短縮されます。