動的ルーティング

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

命名規則

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

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

動的セグメントは、角括弧の中に省略記号 [...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）。