Dynamic Routes

前もって正確な Segment 名がわからず、動的なデータからルートを作成したい場合、リクエスト時に入力される動的 Segment を使うか、ビルド時にprerenderedを使うことができます。

規約

ダイナミック Segment はフォルダーの名前を角括弧で囲み作成できます。例えば、[id]や[slug]などです。

ダイナミック Segment はlayout、page、 route、generateMetadata関数の params として渡されます。

例

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

app/blog/[slug]/page.js

export default function Page({ params }) {
  return <div>My Post</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' }

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

Good to know: ダイナミック Segment は pages ディレクトリの Dynamic Routes と同じです。

Static パラメーターの生成

generateStaticParams関数は動的なルートセグメントと組み合わせて使うことで、リクエスト時にオンデマンドでルートを生成する代わりに、ビルド時に静的に生成できます。

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 リクエストを使用してコンテンツを取得する場合、リクエストは 自動的に重複排除されます。これは、複数の generateStaticParams、レイアウト、ページにわたって同じ引数を持つ fetch リクエストが一度しか行われないことを意味します。

pagesディレクトリからマイグレーションする場合は、migration guide を参照してください。

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

キャッチオール Segment

ダイナミック Segment は、[...フォルダ名]という括弧の中に省略記号を追加することで、後続のすべてのSegment をキャッチするように拡張できます。

例えば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'] }

オプションのキャッチオール Segment

キャッチオールセグメンテーションは、[[...フォルダ名]]という二重の角括弧の中にパラメータを含めることで、オプションにできます。

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

catch-allSegment とoptional catch-allSegment の違いは、optional の場合はパラメータのないルートもマッチする (上の例では /shop) ことです。

Route	Example URL	params
app/shop/[[...slug]]/page.js	/shop	{}
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 を使用する場合、設定したルート Segment に応じて params の型を追加できます。

app/blog/[slug]/page.tsx

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

Route	params Type Definition
app/blog/[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 プラグインによって自動的に行われるようになるかもしれません。