【Next.js】プロジェクトのフォルダ構成を理解する（appディレクトリの中身）

JavaScript
2023.09.29

こんにちは、かつコーチです。

前回はcreate-next-appを使って、実際にNext.jsのプロジェクトを作成しました。

作成されたフォルダを開くと、見慣れないファイルやディレクトリがたくさん並んでいて、戸惑った人も多いのではないでしょうか。

今回は、プロジェクト全体のフォルダ構成、特に開発の中心となるappディレクトリの中身を1つずつ見ていきます。

プロジェクト直下の構成

まずは全体像を確認する

create-next-appで作成したプロジェクトを開くと、主に以下のようなファイル・フォルダが並んでいます。

my-nextjs-app/
├── app/              ← ページやレイアウトを置く中心的なフォルダ
├── public/           ← 画像などの静的ファイルを置くフォルダ
├── node_modules/      ← インストールされたパッケージ
├── package.json       ← プロジェクトの依存パッケージや実行コマンドの定義
├── tsconfig.json       ← TypeScriptの設定ファイル
├── next.config.ts       ← Next.js自体の設定ファイル
└── eslint.config.mjs     ← ESLint（コードチェック）の設定ファイル

このうち、日々の開発でほぼ毎日触ることになるのがappディレクトリです。

publicは画像やアイコンなどの静的ファイルを置く場所で、Reactシリーズのpublicフォルダと役割はほぼ同じです。

package.jsonの役割

package.jsonとは、プロジェクトで使うパッケージ（外部ライブラリ）の一覧や、実行できるコマンドをまとめて管理するファイルです。

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  }
}

前回使ったnpm run devは、このscriptsに定義されたdevコマンド（next dev）を実行していた、ということがここでわかります。

appディレクトリの中身

App Routerの心臓部

appディレクトリとは、Next.jsのApp Routerにおいて、ページの中身やルーティングの構造を定義する中心的なフォルダです。

create-next-app直後のappディレクトリは、シンプルに以下のような構成になっています。

app/
├── favicon.ico     ← ブラウザタブに表示されるアイコン
├── globals.css     ← アプリ全体に適用されるCSS
├── layout.tsx      ← 全ページ共通のレイアウト
└── page.tsx        ← トップページ（"/"）の中身

Next.jsでは、このappディレクトリの中に「どんなファイルを、どこに置くか」によって、自動的にページのURLが決まるファイルベースルーティングという仕組みが採用されています。

この仕組みの詳細は次回の記事で解説しますが、今回はまず、それぞれのファイルが何をしているのかを押さえておきましょう。

page.tsxの役割

// app/page.tsx
export default function HomePage() {
  return (
    <main>
      <h1>Next.jsのトップページです</h1>
    </main>
  );
}

appディレクトリ直下にあるpage.tsxは、サイトのトップページ（URLでいう/）の中身を定義するファイルです。

中身自体は、これまでReactシリーズで書いてきたコンポーネントと同じ書き方です。

layout.tsxの役割

// app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "My Next.js App",
  description: "Next.jsで作ったサンプルサイトです",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

layout.tsxは、複数のページに共通する土台（HTMLの骨組みや、ヘッダー・フッターなど）を定義するファイルです。

childrenという部分に、各ページのpage.tsxの中身が差し込まれる仕組みになっています。

このファイルについても、次々回の記事でより詳しく扱います。

つまずきやすい設定・注意点

私が最初に混乱したファイルの重複

ここで、私が実際に混乱した経験を1つ共有します。

Next.jsを触り始めた頃、app/page.tsxを編集しても画面が変わらず、原因がわからずに30分ほど悩んだことがありました。

原因を調べると、エディタの検索機能で「page.tsx」を探した際に、別のフォルダに残っていた古いテスト用のpage.tsxを誤って編集していたことが判明しました。

❌ Before：どのpage.tsxを編集しているか意識せずに作業していた

app/
├── page.tsx          ← 本来編集すべきファイル
test/
└── page.tsx          ← 検証用に自分で作って放置していたファイル

✅ After：エディタのパス表示・タブ表示を必ず確認する習慣をつける

VSCodeなどのエディタでは、タブやパンくずリストに、開いているファイルのフルパスが表示されています。

app/page.tsxなのか、別のフォルダのpage.tsxなのかを、編集前に必ず確認する癖をつけてからは、この手のミスがなくなりました。

Next.jsは同じファイル名（page.tsxやlayout.tsx）が、フォルダごとに何度も登場する構造です。

「今どのフォルダのファイルを触っているか」を意識することが、思わぬハマりを防ぐコツです。

まとめ

この記事のポイント

  • プロジェクト直下のappディレクトリが、Next.js開発の中心的な場所
  • package.jsonには、npm run devなどのコマンドの実体が定義されている
  • app/page.tsxはトップページの中身、app/layout.tsxは全ページ共通の土台を定義するファイル
  • 同じファイル名がフォルダごとに登場するため、編集中のファイルのパスを常に意識する

次に読むべき記事

appディレクトリの中身が把握できたところで、次回はいよいよ、フォルダ構成がそのままURLになる「ファイルベースルーティング」の仕組みを、page.tsxを中心に詳しく解説します。

→ 次の記事：ファイルベースルーティングの基本：page.tsxの役割

タイトルとURLをコピーしました