ダイナミックルート

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

規約

ファイル名またはフォルダ名を角括弧で囲むことでダイナミックセグメントを作成できます: [segmentName]。例えば [id] や [slug] などです。

ダイナミックセグメントは useRouter からアクセス可能です。

例

例えば、ブログでは pages/blog/[slug].js というルートを作成でき、[slug] がブログ投稿用のダイナミックセグメントとなります。

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()
  return <p>投稿: {router.query.slug}</p>
}

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

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

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

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

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

例えば pages/shop/[[...slug]].js は /shop/clothes や /shop/clothes/tops に加えて、/shop にもマッチします。

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