ダイナミックルート

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

規約

ファイル名またはフォルダ名を角括弧で囲むことでダイナミックセグメントを作成できます: [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/clothes/tops/t-shirts に加えて、さらに /shop にもマッチします。

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