ページ遷移の仕組み——URLとフォルダの関係

このレッスンでは、あなたが作った Next.js アプリに新しいページを1つ追加し、ブラウザのアドレス欄から開けるようにするところまでを体験します。所要時間は 15 分です。

Next.js では、app/ というフォルダの中の「フォルダ名」がそのまま URL の一部になります。料理で例えるなら、冷蔵庫の中の「棚の名前」がそのまま「料理のジャンル」になっているイメージです。app/about/ というフォルダを作れば、ブラウザで /about を開いたときに表示されるページになります。

• app/page.tsx → トップページ（/）
• app/about/page.tsx → /about ページ
• app/contact/page.tsx → /contact ページ

ポイント: ページの中身を書くファイル名は、必ず page.tsx という決まった名前にします。これは Next.js が「このファイルがページ本体ですよ」と認識するためのお約束です。

• 前のレッスンで pnpm create next-app を使って Next.js プロジェクトができていること
• エディタ（Cursor でも VS Code でも OK）でプロジェクトのフォルダを開けること
• ターミナル（＝パソコンに文字で命令を出す黒い画面）で pnpm dev がすでに動いていること

まだ pnpm dev を動かしていない場合は、プロジェクトのフォルダで次の1行を実行します。これはローカル（＝あなたのパソコンの中だけ）で試作サーバーを立ち上げる命令です。

pnpm dev

起動すると http://localhost:3000 というアドレスでアプリが見られるようになります。

エディタで app/ フォルダを開き、その中に about という新しいフォルダを作ります。そしてその about フォルダの中に page.tsx というファイルを新しく作ります。

ファイルの中身は、最初は次の5行で十分です。これは「about というページで、H1見出しと1行の本文を表示する」という意味です。

export default function AboutPage() {
  return <h1>はじめまして、このサイトについて</h1>;
}

迷ったら AI に聞く: Cursor や ChatGPT を開いて、こう聞くと具体的な例がもらえます。

「Next.js の app router で /about ページを追加したいです。app/about/page.tsx の最小サンプルを書いてください。日本語の見出しが1つだけあるシンプルなもので。」

ブラウザで http://localhost:3000/about を開きます。さきほど書いた見出しが表示されれば成功です。

良い例 / 悪い例: フォルダの作り方

• 良い例: app/about/page.tsx を作る → /about で開ける
• 良い例: app/pricing/page.tsx を作る → /pricing で開ける
• 悪い例: app/about.tsx（フォルダを作らずファイルだけ置く）→ 認識されません
• 悪い例: app/about/index.tsx（ファイル名が page.tsx でない）→ 表示されません

今はアドレスを手で打って移動していますが、本来はトップページからクリックで飛べるようにしたいはずです。app/page.tsx を開いて、次の1行を本文のどこかに追加します。

<a href="/about">このサイトについて</a>

保存してトップページをリロードすると、リンクが表示され、クリックで /about に移動できます。（Next.js には Link という専用部品もありますが、今回はまず <a> タグで動く感覚をつかめば十分です。）

次の3つが全部できていれば、このレッスンは完了です。

1. http://localhost:3000/about を開くと、自分が書いた見出しが表示される
2. トップページにある「このサイトについて」リンクをクリックすると /about に移動する
3. app/about/page.tsx というフォルダ＋ファイルの組み合わせで新しいページができる仕組みを自分の言葉で説明できる

• 404 が出る: ほとんどの場合、フォルダ名が違うか、ファイル名が page.tsx になっていません。app/about/page.tsx という形になっているか見直してください
• 保存したのに反映されない: pnpm dev のターミナルに赤いエラーが出ていないか確認します。エラー文をそのまま Claude や Cursor に貼り付けて「これを直す最小の修正を教えて」と聞くと早いです
• 大文字小文字: About と about は別物として扱われます。URL は全部小文字に揃えるのが無難です
• app/ と pages/ が両方ある: 今回は app/ の中だけを触ります。pages/ は古いやり方なので、無ければ作る必要はありません

• 「app/ の中に /pricing と /contact の2ページを追加したいです。それぞれ page.tsx の最小サンプルを、日本語の見出しだけのシンプルな内容で書いてください」
• 「トップページから /about に飛ぶリンクを、Next.js の推奨する Link コンポーネントで書き直してください。今の <a href="/about"> を置き換える形で」
• 「/about を開くと 404 になります。原因として考えられることを、フォルダ構成とファイル名の観点で3つ教えてください」