サンプルコードで身につける: App Router — フォルダがそのままURLになる

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

11つのフォルダが1つのURLになる

App Router の最小単位です。app の中に about フォルダを1つ作ると、それだけで /about という URL が定義されます。ルーティングの設定ファイルを書く場所を探す必要はなく、フォルダ作成そのものが定義になります。

// app/about/ フォルダを作ると /about という URL が生まれる
//
// app/
// └── about/   → /about
//
// これがルーティング定義のすべて。
// ルート一覧の設定ファイルやルーティング用のコードは書かない。
// 「フォルダを作る = URL を作る」という1対1の対応で考える。

2会社サイトのURL設計

フォルダを並べるだけで、サイトの全ページのURL一覧が出来上がる例です。実務でも新しいサイトを作るときは、まずこのようにフォルダ構成を書き出すことがURL設計そのものになります。

// 小さな会社サイトのフォルダ構成 = URL 一覧
//
// app/
// ├── about/      → /about     (会社概要)
// ├── news/       → /news      (お知らせ)
// ├── recruit/    → /recruit   (採用情報)
// └── contact/    → /contact   (お問い合わせ)
//
// フォルダ一覧を見れば「このサイトに何ページあるか」が分かる。
// 逆に /recruit のコードを探すときは app/recruit/ を開けばよい。

3フォルダの入れ子はURLの階層になる

フォルダを入れ子にすると、URL もそのまま「/」区切りで深くなることを示す例です。実務ではブログのカテゴリ分けやドキュメントの章立てなど、内容を階層で整理したいページでこの形が登場します。

// フォルダの深さ = URL の深さ
//
// app/
// └── blog/            → /blog
//     ├── tech/        → /blog/tech
//     ├── life/        → /blog/life
//     └── tech-news/   → /blog/tech-news
//
// URL の区切り「/」とフォルダの区切りが完全に一致する。
// /blog/tech のコードを探すなら app/blog/tech/ をたどるだけ。

4フォルダパスからURLを計算してみる

「app からの相対パスが URL になる」という変換規則を、プレーンな TypeScript の関数として書いてみた例です。Next.js が内部でやっている対応付けは、実行して確かめられるほど単純な規則だと分かります。

TypeScript

// 「app からの相対パス → URL」という対応を関数で再現
function folderToUrl(folderPath: string): string {
  const segments = folderPath.split("/").filter((s) => s !== "");
  if (segments[0] === "app") {
    segments.shift(); // 先頭の app はURLに含まれない
  }
  return "/" + segments.join("/");
}

console.log(folderToUrl("app")); // /
console.log(folderToUrl("app/about")); // /about
console.log(folderToUrl("app/blog/news")); // /blog/news
console.log(folderToUrl("app/shop/items/sale")); // /shop/items/sale

5ECサイトのURL設計

実務規模のサイトでも考え方は同じで、フォルダ構成図がそのまま画面一覧と URL 仕様書を兼ねる例です。チーム開発では「カート周りは app/cart 以下を見る」のように、担当範囲の会話もフォルダ単位でできるようになります。

// EC サイトのフォルダ構成 = URL 仕様書
//
// app/
// ├── products/        → /products        (商品一覧)
// │   └── sale/        → /products/sale   (セール商品)
// ├── cart/            → /cart            (カート)
// ├── checkout/        → /checkout        (購入手続き)
// └── account/         → /account         (マイページ)
//     └── orders/      → /account/orders  (注文履歴)
//
// ページが増えてもやることは「フォルダを増やす」だけで、
// ルーティング設定が肥大化していくことがない。