Dynamic Routes

特定のセグメント名を事前に知っておらず、動的なデータからルートを作成したい場合は、リクエスト時またはビルド時に事前レンダリングで埋められるDynamic Segmentsを使用できます。

規約

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

Dynamic Segmentsは、layout、page、route、およびgenerateMetadata関数にparams propとして渡されます。

例

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

TypeScript

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

JavaScript

app/blog/[slug]/page.js

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

Route	Example URL	params
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 propはPromiseであるため、値にアクセスするにはasync/awaitまたはReactのuse関数を使用する必要があります。
  • バージョン14以前では、paramsは同期的なpropでした。後方互換性を助けるために、Next.js 15ではまだこれを同期的にアクセスできますが、この動作は将来的には非推奨となります。
• Dynamic Segmentsは、pagesディレクトリにおけるDynamic Routesに相当します。

Generating Static Params

generateStaticParams関数は、dynamic route segmentsと組み合わせて使用し、ビルド時にルートを静的に生成することができます。これは、リクエスト時にオンデマンドで行う代わりです。

TypeScript

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

JavaScript

app/blog/[slug]/page.js

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、Layouts、Pagesで1回だけ行われるため、ビルド時間が短縮されます。

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

詳細情報と高度なユースケースについては、generateStaticParamsサーバー関数ドキュメントを参照してください。

Catch-all Segments

Dynamic Segmentsは、括弧内に省略記号を追加して、以降のセグメントをすべてキャッチするように拡張できます: [...folderName]。

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

Route	Example URL	params
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も一致します。

catch-allセグメントとoptional catch-allセグメントの違いは、オプションの場合、パラメーターなしのルートにも一致することです（上記の例では/shop）。

Route	Example URL	params
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の型を追加できます。

TypeScript

app/blog/[slug]/page.tsx

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

JavaScript

app/blog/[slug]/page.js

export default async function Page({ params }) {
  return <h1>My Page</h1>
}

Route	params Type Definition
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 pluginによって自動的に行われる可能性があります。