動的ルート

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

規約

動的セグメントは、フォルダー名を角括弧で囲むことで作成できます：[folderName]。例えば、[id]や[slug]などです。

動的セグメントは、layout、page、route、generateMetadata関数にparamsプロップとして渡されます。

例

例えば、ブログにはapp/blog/[slug]/page.jsのようなルートを含めることができ、[slug]はブログ投稿の動的セグメントです。

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

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

補足

• paramsプロップはプロミスであるため、値にアクセスするには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、レイアウト、ページ間で同じ引数を持つfetchリクエストが1回しか行われないことを意味し、ビルド時間を短縮します。

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プラグインによって自動的に行われる可能性があります。