動的ルート

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

規則

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