5. 動的ルート — [id] でURLの一部を受け取る

ブログ記事のように「/blog/1」「/blog/2」と無数にあるページは、フォルダ名を角括弧にした app/blog/[id]/page.tsx という1つのファイルでまとめて作れます。角括弧の部分は何にでもマッチし、その値は params から受け取れます。

受け取り方には注意が必要です。App Router では params は Promise なので、ページコンポーネントを async にして const { id } = await params のように await してから使います("1" や "2" が取り出せます)。

実務では記事詳細、商品ページ、ユーザープロフィールなど「同じレイアウトで中身だけ違うページ」のほぼすべてで使います。受け取った id を使ってその記事のデータを探し、表示する、という流れが定番です。

下のコードは、この「パターンと URL の照合」を Next.js なしのプレーンな TypeScript で再現したものです。[id] のような部分は値を取り出し、それ以外は完全一致を要求する、という動きを実行して確かめてみてください。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

// "/blog/[id]" のようなパターンと URL を照合する仕組みを再現
function matchRoute(
  pattern: string,
  path: string
): Record<string, string> | null {
  const patternParts = pattern.split("/").filter((p) => p !== "");
  const pathParts = path.split("/").filter((p) => p !== "");
  if (patternParts.length !== pathParts.length) return null;

  const params: Record<string, string> = {};
  for (let i = 0; i < patternParts.length; i++) {
    const part = patternParts[i];
    if (part.startsWith("[") && part.endsWith("]")) {
      params[part.slice(1, -1)] = pathParts[i]; // [id] → 値を取り出す
    } else if (part !== pathParts[i]) {
      return null; // 固定部分は完全一致が必要
    }
  }
  return params;
}

console.log(matchRoute("/blog/[id]", "/blog/42")); // { id: "42" }
console.log(matchRoute("/users/[name]", "/users/kazu")); // { name: "kazu" }
console.log(matchRoute("/blog/[id]", "/about")); // null

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗