ダイナミックルート

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

規約

ファイル名またはフォルダ名を角括弧で囲むことでダイナミックセグメントを作成できます: [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）にもマッチする点です。