発行:

Next.jsのディレクトリ構成

プロジェクトを作成した直後、多くのファイルが自動生成されていて「何がどこにあるのか」迷ってしまうかもしれません。
ここでは、Next.js プロジェクトの基本的なディレクトリ構成と、主要なファイルの役割について解説します。

プロジェクトの全体像

プロジェクトのルートディレクトリ（my-app）には、設定ファイルやソースコードが格納されています。
主要な構成要素は以下の通りです。

Directories
my-app
├── .gitignore          # Git管理から除外するファイルを指定
├── .next               # ビルド時に生成されるファイル群（直接編集はしません）
│   └── ...
├── README.md           # プロジェクトの説明書
├── next-env.d.ts       # Next.jsの型定義ファイル（TypeScript用）
├── node_modules        # インストールされたライブラリ（npmパッケージ）の実体
│   └── ...
├── package-lock.json   # インストールされたパッケージの正確な構成情報
├── package.json        # プロジェクトの依存パッケージやスクリプトを管理
├── postcss.config.mjs  # CSSツール（PostCSS）の設定
├── public              # 静的ファイル（画像など）を格納する場所 -> [解説1]
│   ├── next.svg
│   └── vercel.svg
├── src                 # ソースコードの格納場所 -> [解説2]
│   └── app
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
├── tailwind.config.ts  # Tailwind CSS の設定ファイル
└── tsconfig.json       # TypeScript の設定ファイル

主要なファイルの解説

設定ファイル群

tsconfig.json

TypeScript のコンパイル設定などが記述されたファイルです。
compilerOptions 内の paths 設定により、@/ というエイリアス（別名）を使って src ディレクトリ配下を簡潔にimportできるように設定されています。

next-env.d.ts

Next.js が提供する機能の型情報を TypeScript に認識させるためのファイルです。
基本的に開発者が手動で編集することはありません。

パッケージ管理ファイル

package.json

プロジェクトの情報や、使用しているライブラリ（next, react, tailwindcss など）の情報が記載されています。
また、npm run dev などの実行スクリプトもここで定義されています。

package-lock.json は実際にインストールされたパッケージを固定するためのファイルです。
node_modules ディレクトリには、ダウンロードされたライブラリの実態が大量に格納されています。これは非常にサイズが大きくなるため、Git などでの管理には含めないのが一般的です（.gitignore で指定されています）。

[解説1] public ディレクトリ

public ディレクトリは、画像やフォント、ダウンロード用PDFなどの 静的ファイル を置く場所です。
この中にあるファイルは、アプリケーションのルートURLから直接参照できます。

例: public/vercel.svg -> http://localhost:3000/vercel.svg

[解説2] src/app ディレクトリ ここが開発の主戦場です。 App Router 版の Next.js では、app ディレクトリの中にページやレイアウトを作成していきます。

ファイル名役割
page.tsxページそのもの です。URLに対応する画面の中身を記述します。
layout.tsxレイアウト です。ヘッダーやフッターなど、複数のページで共通する枠組みを定義します。
globals.cssアプリケーション全体に適用されるCSSファイルです。
favicon.icoブラウザのタブに表示されるアイコンです。

ルーティングの仕組み（予告）

Next.js では、 「ディレクトリ（フォルダ）の構造」がそのまま「URL」になります。 これを ファイルシステムベースのルーティング と呼びます。

例えば：

  • src/app/page.tsx -> トップページ (/)
  • src/app/about/page.tsx -> アバウトページ (/about)

フォルダを作るだけで新しいページが増やせる、という直感的な仕組みになっています。
詳しくは次章で解説します。

まとめ

  • public には画像などの静的リソースを置く。
  • src/app にページやコンポーネントを作っていく。
  • 設定ファイル（package.json や tsconfig.json）はプロジェクトの根幹を管理している。

ディレクトリの役割を把握しておくと、迷わずに開発を進められます。
次章では、最も重要な機能の一つである「ルーティング」について詳しく見ていきましょう。