ダイナミックルーティング

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

規約

ダイナミックセグメントは、フォルダー名を角括弧で囲むことで作成できます: [folderName]。例えば、[id] や [slug] のように使用します。

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

例

例えば、ブログでは 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>
}

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

参考情報

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

静的パラメータの生成

generateStaticParams 関数は、ダイナミックルーティングセグメントと組み合わせて使用​​することで、リクエスト時のオンデマンドではなく、ビルド時にルートを静的に生成できます。

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

generateStaticParams 関数の主な利点は、データのスマートな取得です。generateStaticParams 関数内で fetch リクエストを使用してコンテンツがフェッチされる場合、そのリクエストは自動的にメモ化されます。これは、複数の generateStaticParams、Layouts、Pages で同じ引数を持つ fetch リクエストが一度だけ行われることを意味し、ビルド時間を短縮します。

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

詳細および高度な使用例については、generateStaticParams サーバー関数ドキュメントを参照してください。

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

ダイナミックセグメントは、角括弧内に省略記号 [...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 の型を追加できます。

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  return <h1>My Page</h1>
}

参考情報: 将来的には、TypeScript プラグインによってこれが自動的に行われるようになる可能性があります。