先生と生徒の会話形式で理解しよう

生徒

「Next.jsを作ったら、フォルダがたくさんあって混乱しました…」

先生

「最初は誰でもそうなります。フォルダにはそれぞれ役割があります。」

生徒

「appとかpagesとかpublicって、何が違うんですか？」

先生

「では、家の間取りを例にしながら順番に説明します。」

1. Next.jsのフォルダ構成を理解する意味

Next.jsの環境構築が終わると、たくさんのフォルダが作成されます。プログラミング未経験の方にとっては、どこに何を書けばいいのか分からなくなりがちです。しかし、フォルダ構成を理解すると、作業場所に迷わなくなります。

フォルダ構成は、整理された引き出しのようなものです。文房具を種類ごとに分けるように、Next.jsでは役割ごとにファイルを置く場所が決まっています。

2. appフォルダとは何か

appフォルダは、Next.jsで新しく使われる中心的なフォルダです。ここには、画面として表示されるページやレイアウトを配置します。家で例えるなら、リビングや部屋そのものにあたります。

appフォルダの中にpage.tsxやpage.jsxを置くと、それがブラウザに表示される画面になります。


export default function Page() {
  return <h1>トップページ</h1>;
}

（画面に「トップページ」と表示されます）

3. pagesフォルダの役割

pagesフォルダは、従来のNext.jsで使われてきた画面用フォルダです。ファイル名とURLが直接つながる特徴があります。たとえば、about.jsを置くと、aboutページとして表示されます。

pagesフォルダは、住所録のような存在です。ファイル名がそのまま行き先になるため、初心者でも仕組みを理解しやすいです。


export default function About() {
  return <p>これはAboutページです</p>;
}

（/aboutにアクセスすると文章が表示されます）

4. appとpagesの違いをやさしく理解

appフォルダとpagesフォルダは、どちらも画面を作るための場所です。ただし、appは新しい考え方、pagesは昔からある考え方です。どちらか一方だけを使うこともできます。

初心者のうちは、「どちらも画面を置く場所」と覚えておけば問題ありません。無理に使い分ける必要はありません。

5. publicフォルダとは何か

publicフォルダは、画像やアイコンなどの置き場所です。文字ではなく、見た目に関係する素材を入れる場所だと考えてください。家で言うと、飾りや家具を置く倉庫のような役割です。

publicフォルダに入れた画像は、特別な設定をしなくても使えます。


<img src="/sample.png" />

（sample.pngの画像が画面に表示されます）

6. フォルダ構成を意識するメリット

Next.jsのフォルダ構成を理解すると、「どこに何を書くのか」で迷う時間が減ります。これは、作業効率が上がる大きなポイントです。

特にapp、pages、publicの3つを理解するだけで、 Next.jsの全体像が一気に分かりやすくなります。

7. 初心者がつまずきやすいポイント

よくある失敗として、画像をappやpagesに入れてしまうことがあります。画像は必ずpublicフォルダに入れると覚えておくと安心です。

フォルダの役割を知ることは、プログラミングのルールを守る第一歩になります。

まとめ

Next.jsの学習を始めたばかりの頃は、プロジェクトを作成した直後に現れる大量のフォルダやファイルを見て、どこから手を付ければ良いのか圧倒されてしまうものです。しかし、今回解説した「appフォルダ」「pagesフォルダ」「publicフォルダ」の3つの役割さえしっかりと押さえておけば、開発の基礎はマスターしたも同然です。

各フォルダの役割を再確認しよう

これまでの内容を振り返ると、Next.jsにおけるフォルダ構成は、単なるデータの置き場所ではなく、アプリケーションの動作を決める重要な「設計図」であることがわかります。

appフォルダ： 最新のNext.js（App Router）における中心地。直感的なディレクトリ構造で、レイアウトの共通化なども得意です。
pagesフォルダ： 従来のNext.js（Pages Router）で使われる場所。ファイル名がそのままURLになるシンプルさが魅力です。
publicフォルダ： 画像、ロゴ、favicon、フォントなど、静的なアセットを保管する倉庫です。

実践的なフォルダ構成の使い分け

現代のウェブ開発では、最新の機能を利用するために「appフォルダ」をメインに使うことが推奨されています。例えば、ユーザーのプロフィール画面を作成したい場合は、appフォルダ内に新しいディレクトリを作成し、その中にpage.tsxを配置します。これにより、複雑なルーティングも視覚的に整理された状態で管理できるようになります。

サンプルコード：共通レイアウトと個別ページの作成

Next.jsの大きな特徴の一つに、共通のデザイン（ヘッダーやフッターなど）を簡単に管理できる「layout.tsx」があります。これを利用することで、全てのページで同じナビゲーションを表示させることが可能です。


// app/layout.tsx
// 全ページ共通の枠組みを定義します
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>
        <header style={{ padding: '1rem', borderBottom: '1px solid #ccc' }}>
          My Awesome Website
        </header>
        <main>{children}</main>
        <footer style={{ marginTop: '2rem', textAlign: 'center' }}>
          © 2026 Next.js学習記
        </footer>
      </body>
    </html>
  );
}

（画面の上部に「My Awesome Website」、中央に各ページの内容、下部にコピーライトが表示されるようになります）

次に、実際のコンテンツ部分となるページファイルを作成します。これがappフォルダ内にあることで、自動的にルーティングが設定されます。


// app/page.tsx
// これがトップ画面になります
import React from 'react';

export default function HomePage() {
  return (
    <div style={{ padding: '20px' }}>
      <h2>メインコンテンツへようこそ</h2>
      <p>Next.jsのフォルダ構成をマスターすることで、開発効率は劇的に向上します。</p>
      <img src="/logo.png" alt="ロゴ" style={{ width: '100px' }} />
    </div>
  );
}

（ヘッダーとフッターの間に「メインコンテンツへようこそ」という見出しと、publicフォルダ内のロゴ画像が表示されます）