App Routerとページ

なぜ学ぶか： Next.jsでは「フォルダを作ること」が「ページを作ること」です。この対応が分かると、URLからファイルを、ファイルからURLをすぐ特定できます。対応表を見てください。

まずはこの例を見てみましょう

src/app/
├── page.tsx           → /            （トップページ）
├── about/
│   └── page.tsx       → /about
└── blog/
    ├── page.tsx       → /blog        （記事一覧）
    └── [slug]/
        └── page.tsx   → /blog/○○○  （記事詳細 → 後のトピックで）

フォルダの入れ子が、そのままURLの階層になります。

コード例

// src/app/about/page.tsx を作ると /about ページになる

export default function AboutPage() {
  return (
    <main>
      <h1>このサイトについて</h1>
      <p>AI駆動開発を学ぶためのサイトです。</p>
    </main>
  );
}

export defaultされた関数が、そのURLのページとして表示されます。中身はPhase 02でやった普通のコンポーネントです。