Dynamic Routes

あらかじめ正確なセグメント名を知らない場合や、routes を Dynamic データから作成したい場合は、dynamic Segments を使用して、request 時に入力したり、build 時にprerenderedしたりできます。

Convention

Dynamic セグメントは、ファイル名やフォルダ名を角括弧で囲むことで作成できます：[segmentName]。例えば、[id]や[slug]のようになります。

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

Example

たとえば、ブログには次のような routepages/blog/[slug].jsが含まれることがあります。ここで、[slug]はブログ投稿のための Dynamic セグメントです。

import { useRouter } from "next/router";

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

Catch-all Segments

Dynamic セグメントは、ブラケット内に省略記号を追加することで、後続のセグメントをすべてcatch-allできるように拡張できます。[...segmentName]。

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

Optional Catch-all Segments

Catch-all セグメントはダブルスクエアブラケット内にパラメータを含めることでオプショナルにすることができます：[[...segmentName]]。

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

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