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

生徒

「Next.jsのプロジェクトを作ったら、フォルダがたくさん出てきて混乱しました…」

先生

「Next.jsは最初から便利なフォルダ構成が用意されているので、順番に見ていけば大丈夫です。」

生徒

「どのフォルダが何の役割なのか、初心者でも理解できますか？」

先生

「もちろんです。パソコン初心者の方にもわかる例えで説明していきます。」

1. Next.jsのディレクトリ構成とは？

Next.js（ネクストジェイエス）のディレクトリ構成とは、プロジェクトを作成したときに自動で用意されるフォルダやファイルの並びのことです。ディレクトリとは「書類を入れる引き出し」のようなもので、役割ごとに整理されています。この構成を理解すると、「どこに何を書けばよいのか」が自然にわかるようになります。

プログラミング未経験の方は、まず「フォルダ＝箱」「ファイル＝紙」と考えてください。 Next.jsは、最初から整理整頓された棚を用意してくれる便利な仕組みなのです。

2. プロジェクト作成直後の基本フォルダ一覧

Next.jsプロジェクトを作成すると、いくつかの重要なフォルダが自動で作られます。代表的なのが app フォルダや public フォルダ、設定用のファイルです。これらはすべて意味があり、不要なものではありません。

例えるなら、家を建てたときに「リビング」「キッチン」「寝室」が最初から用意されている状態です。どの部屋で何をするのかを知ることが、Next.js理解の第一歩になります。

3. appフォルダの役割を理解しよう

app（アップ）フォルダは、Next.jsの中心となる場所です。ここには画面表示に関係するファイルを置きます。 Webサイトの「見た目」や「ページ構成」を決める重要なフォルダです。

appフォルダの中にフォルダを作ると、その名前がURLになります。これは「フォルダ構成＝Webサイトの道順」と考えると理解しやすいです。


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

（ブラウザを開くと「トップページです」と表示されます）

4. page.jsファイルの意味

appフォルダの中で特に重要なのが page.js ファイルです。このファイルがあることで、そのフォルダは「ページ」として認識されます。 page.jsは「この場所に画面がありますよ」という目印の役割です。

HTMLを直接書くのではなく、JavaScriptで画面を作れるのがNext.jsの特徴です。初心者の方は、まず「画面を表示するファイル」と覚えてください。


export default function About() {
  return <p>このページは自己紹介ページです</p>;
}

（画面に「このページは自己紹介ページです」と表示されます）

5. layout.jsで共通デザインを管理する

layout.js（レイアウトジェイエス）は、複数ページで共通するデザインをまとめるファイルです。例えば、ヘッダーやフッターなど、どのページでも同じ部分をここに書きます。

学校のプリントでいうと、「毎回印刷されている学校名」のような存在です。一度書けば、すべてのページに自動で反映されます。


export default function Layout({ children }) {
  return (
    <div>
      <header>共通ヘッダー</header>
      {children}
    </div>
  );
}

6. publicフォルダで画像やファイルを管理

public（パブリック）フォルダは、画像やアイコンなどのファイルを置く場所です。ロゴ画像や写真など、画面に表示したい素材はここに入れます。

publicフォルダは「誰でも見られる倉庫」のようなものです。 URLを指定するだけで、簡単に画像を表示できます。


export default function ImageSample() {
  return <img src="/sample.png" alt="サンプル画像" />;
}

7. 設定ファイルの役割をざっくり理解

Next.jsプロジェクトには、いくつかの設定ファイルがあります。例えば next.config.js などが代表例です。これらは「細かい動きを調整するスイッチ」のような存在です。

初心者のうちは、無理に編集する必要はありません。「こういう設定用のファイルがあるんだ」と知っておくだけで十分です。

8. ディレクトリ構成を理解するメリット

Next.jsのディレクトリ構成を理解すると、コードを書く場所に迷わなくなります。どこに何を書くかが明確になるため、エラーも減り、学習効率が上がります。

最初は難しく感じても、フォルダの役割を一つずつ覚えることで、「地図を見ながら目的地に向かう感覚」で開発できるようになります。

Next.jsのディレクトリ構成を完全解説！初心者でもわかるNext.jsプロジェクトのフォルダ構成