Dynamic Routes

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

Convention

ダイナミックセグメントは、ファイル名またはフォルダ名を角括弧で囲む([segmentName])ことで作成でる。 [segmentName]。

ダイナミックセグメントは、useRouter からアクセスできる。
https://nextjs.org/docs/14/pages/api-reference/functions/use-router

Example

例えば、ブログには次のようなルート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にもマッチします。