動的ルート

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

規則

動的セグメントは、ファイルまたはフォルダ名を角括弧で囲むことで作成できます：[セグメント名]。例えば、[id]や[slug]などです。

動的セグメントには、useRouter からアクセスできます。

例

例えば、ブログには pages/blog/[slug].js というルートがあり、[slug] はブログ投稿の動的セグメントです。

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  return <p>Post: {router.query.slug}</p>
}

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

動的セグメントは、角括弧内に省略記号を追加することで、キャッチオールの後続セグメントに拡張できます：[...セグメント名]。

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

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

キャッチオールセグメントは、パラメータを二重の角括弧で囲むことでオプションにできます：[[...セグメント名]]。

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

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