動的ルート

動的セグメントは、前もって正確なセグメント名がわからない場合や、動的なデータからルートを作成したい場合に使用します。これらのセグメントは、リクエスト時に埋め込まれるか、ビルド時にプリレンダリングされます。

規約

動的セグメントは、ファイル名またはフォルダ名を角括弧で囲むことで作成できます: [segmentName]。例: [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>
}

Catch-all Segments

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

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

Optional Catch-all Segments

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

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

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