Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – Next.jsのフォルダ構造

Next.js のフォルダ構造の全体イメージ

Next.js は「フォルダの構造 ＝ URL の構造」という、かなり直感的な仕組みを持っています。
特に新しい App Router（app ディレクトリ）では、この考え方がさらに強化されています。

まずはざっくりとイメージを持ってください。

プロジェクトの中には、だいたいこんな感じのフォルダがあります（実際の中身はもう少し多いですが）：

app/
pages/（古い構成の場合だけ）

今の Next.js では、基本的に app フォルダを使う「App Router」という仕組みが推奨されています。
ただし、昔からある pages フォルダの「Pages Router」も、既存プロジェクトではよく残っています。

ここから、app と pages の役割の違いを丁寧に分けて説明していきます。

app / pages の役割

pages ディレクトリの役割（昔からのやり方）

pages は、Next.js で昔から使われている「ルーティング用フォルダ」です。
この方式では、pages の中に置いたファイルが、そのまま URL に対応します。

例えば：

pages/about.tsx → /about
pages/contact.tsx → /contact

といった感じです。

pages 方式の特徴は、シンプルで分かりやすいことです。
ファイル名がそのまま URL になるので、直感的で学習コストが低く、Next.js 初期からずっと使われてきました。

ただし、プロジェクトが大きくなるにつれて、

ページごとのレイアウトを柔軟に共有したい
サーバーコンポーネントや高度なデータ取得を簡単に扱いたい

といった要望が増え、そのために登場したのが app ディレクトリを使う新しい App Router です。

app ディレクトリの役割（今の標準的なやり方）

App Router では、app フォルダの構造がそのまま URL に対応します。

重要なポイントは：

フォルダ → URL の「区切り」
その中の page.tsx → 実際のページ

というルールです。

例えば、こんな構造だとします。

app/about/page.tsx

このとき、この page.tsx は /about という URL に対応します。

さらに、ネスト（入れ子）したフォルダも同じルールで動きます。

app/dashboard/page.tsx → /dashboard
app/dashboard/analytics/page.tsx → /dashboard/analytics

という感じで、「フォルダの階層構造 ＝ URL の階層構造」になります。

この仕組みによって、

ディレクトリ構造を見れば、どんな URL があるのか一発で分かる
ページごとに layout.tsx などを置いて、レイアウトを柔軟に共有できる

といったメリットがあります。

page.tsx の意味

page.tsx は「このフォルダをページとして公開するスイッチ」

App Router では、「フォルダ」だけ作っても、その URL にページは表示されません。
そのフォルダの中に page.tsx を置くことで、「このパスはブラウザからアクセスできるページです」と Next.js に教えます。

Next.js の公式ドキュメントでも、
「page.tsx はルートを公開するために必要な特別なファイルだ」と説明されています。

つまり、

フォルダ ＝ URL の区切り
page.tsx ＝ その URL で表示される中身（Reactコンポーネント）

という役割分担になっています。

具体例でイメージする

例えば、app/dashboard/page.tsx にこんなコードを書いたとします。

// app/dashboard/page.tsx
export default function Page() {
  return <p>ダッシュボードページ</p>;
}

// app/dashboard/page.tsx
export default function Page() {
  return <p>ダッシュボードページ</p>;
}

この場合、

/dashboard にアクセスすると、「ダッシュボードページ」と表示されます。

フォルダ名 dashboard が URL の /dashboard に対応し、
その中の page.tsx が、その URL に表示されるコンテンツを定義している、という流れです。

page.tsx の中身は「Reactコンポーネント」

page.tsx の中で書くのは、普通の React コンポーネントです。
必ず export default でコンポーネントをひとつ返す形になります。

例えば、トップページ用の app/page.tsx は、初期状態でだいたいこんな形です。

export default function Page() {
  return (
    <main>
      <h1>Hello, Next.js!</h1>
    </main>
  );
}

export default function Page() {
  return (
    <main>
      <h1>Hello, Next.js!</h1>
    </main>
  );
}

難しく考えず、

「page.tsx って名前の React コンポーネントファイルがあると、そのフォルダの URL でページが表示される」

くらいの感覚で大丈夫です。

URLとファイルの関係

「フォルダ構造 ＝ URL」の基本ルール

App Router（app ディレクトリ）では、ファイルシステムベースのルーティングが採用されています。
これは公式にも「フォルダ構造そのものが URL にマッピングされる」と説明されています。

基本ルールは次の通りです（文章で整理します）。

app/page.tsx → /（トップページ）
app/about/page.tsx → /about
app/blog/page.tsx → /blog
app/blog/post/page.tsx → /blog/post

フォルダごとに URL の「/」で区切られるイメージです。

動的ルート（少しだけ先の話）

少し応用ですが、「URL の一部が変わるページ」も作れます。
例えばブログ詳細ページ blog/任意の文字列 のようなURLです。

App Router では、次のようなフォルダ構成にします。

app/blog/[slug]/page.tsx

このとき、/blog/nextjs-intro や /blog/hello-world など、[slug] の部分には何でも入る URL をまとめて扱えます。

今は「[ ] を使うと動的なパス（可変の部分）を表せるんだな」くらいでOKです。

最初の画面を表示する

トップページは app/page.tsx が担当

Next.js の App Router を使ったプロジェクトには、最初から app/page.tsx が用意されています。
これはルート /（トップページ）の画面を担当するファイルです。

公式のチュートリアルでも、

/app/page.tsx は / に対応するホームページである

と説明されています。

つまり、最初の画面を変えたければ、この app/page.tsx を編集すればOKです。

実際に文言を変えてみる例

例えば、app/page.tsx を次のように書き換えてみます。

// app/page.tsx
export default function Page() {
  return (
    <main style={{ padding: "40px", fontFamily: "sans-serif" }}>
      <h1>Next.js × React 入門へようこそ</h1>
      <p>これは、あなたが最初に作ったトップページです。</p>
      <p>この文章を自由に書き換えて、画面がどう変わるか試してみてください。</p>
    </main>
  );
}

// app/page.tsx
export default function Page() {
  return (
    <main style={{ padding: "40px", fontFamily: "sans-serif" }}>
      <h1>Next.js × React 入門へようこそ</h1>
      <p>これは、あなたが最初に作ったトップページです。</p>
      <p>この文章を自由に書き換えて、画面がどう変わるか試してみてください。</p>
    </main>
  );
}

その状態で npm run dev を実行し、ブラウザで http://localhost:3000 を開くと、
今書き換えた内容が、そのままトップページとして表示されます。

ここまでできれば、

app フォルダの中身を変える → URL / の中身が変わる

という、「ファイル構造と画面の対応関係」を体感できます。

新しいページをひとつ足してみるイメージ

もう一歩進んで、「自己紹介ページ」を追加したいとします。

1つめのステップとして、app の下に about フォルダを作り、その中に page.tsx を作ります。

app/about/page.tsx に、例えばこんなコードを書きます。

// app/about/page.tsx
export default function Page() {
  return (
    <main style={{ padding: "40px", fontFamily: "sans-serif" }}>
      <h1>このサイトについて</h1>
      <p>これは Next.js × React の練習用サイトです。</p>
      <p>自分のプロフィールや作りたいもののアイデアを書いても良いですね。</p>
    </main>
  );
}

// app/about/page.tsx
export default function Page() {
  return (
    <main style={{ padding: "40px", fontFamily: "sans-serif" }}>
      <h1>このサイトについて</h1>
      <p>これは Next.js × React の練習用サイトです。</p>
      <p>自分のプロフィールや作りたいもののアイデアを書いても良いですね。</p>
    </main>
  );
}

開発サーバーが動いている状態で、ブラウザで http://localhost:3000/about にアクセスすると、
今の about/page.tsx がそのまま表示されます。

これが「フォルダ構造 ＝ URL構造」の最も基本的な体験です。

まとめ（フォルダ構造を味方にする）

ここまでのポイントを、頭の中で整理しておきます。

Next.js（App Router構成）では、app フォルダがルーティングの中心で、フォルダ構造がそのまま URL にマッピングされる。
page.tsx は「そのフォルダを外からアクセス可能なページにする特別なファイル」で、中身はただの React コンポーネント。
app/page.tsx は /（トップページ）、app/xxx/page.tsx は /xxx に対応する。
最初の画面を変えたいときは、app/page.tsx を書き換えればよい。

この感覚がつかめると、「あ、このフォルダを作ればこのURLになるんだな」と、
コードを書く前に URL 設計から考えられるようになります。

もし次に進むなら、

app の中に自分でいくつかフォルダを作って page.tsx を置き、
/about、/contact、/blog などの「自分のサイトっぽいURL」を増やしていく

という練習をすると、かなり早く体に馴染んでいきます。