はじめに
本記事では、Next.js を使用したフロントエンドプロジェクトの典型的なディレクトリ構成について解説します。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
DockerやTypeScript、ESLintなどを活用した、実用的なプロジェクト構成をもとに、それぞれのファイルやフォルダが担う役割について整理していきます。
書こうと思ったきっかけ
チーム開発や学習の中で「この構成ってどんな意味があるの？」と疑問を持つことが多かったため、自分自身の理解の整理と、これからNext.jsを始める方に向けた備忘録としてまとめようと思いました。
ディレクトリ構成
frontend
├── docker-compose.yml
├── Dockerfile
├── eslint.config.mjs
├── Makefile
├── next-env.d.ts
├── next.config.ts
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│ ├── file.svg
│ ├── globe.svg
│ ├── next.svg
│ ├── vercel.svg
│ └── window.svg
├── pull_request_template
├── README.md
├── src
│ └── app
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
└── tsconfig.json
各ファイル・ディレクトリの役割
ルート直下のファイル
- docker-compose.yml: 複数サービスを同時に立ち上げるDocker構成ファイル
- Dockerfile: アプリケーションのビルド手順を定義
- eslint.config.mjs: コードスタイルチェック用の設定
- Makefile: 開発用コマンドをまとめたファイル（例：make build）
- next-env.d.ts: Next.js固有の型補完用ファイル（自動生成）
- next.config.ts: Next.jsのカスタマイズ設定
- node_modules/: インストール済みのnpmパッケージ
- package.json / package-lock.json: パッケージ管理ファイル
- postcss.config.mjs: PostCSSの設定ファイル（Tailwindなど）
- pull_request_template: GitHubのPRテンプレート
- README.md: プロジェクト説明用ドキュメント
- tsconfig.json: TypeScriptのコンパイル設定
public/
- 静的ファイル（画像、アイコンなど）を格納する場所。URLで直接アクセス可能。
src/app/
- favicon.ico: サイトアイコン
- globals.css: 全体スタイルを定義
- layout.tsx: 全ページ共通のレイアウト
- page.tsx: トップページのエントリーポイント
特徴
| 特徴 | 内容 |
|---|---|
| TypeScript対応 |
.tsや.tsxの使用 |
| App Router構成 |
src/app/ 配下に page.tsx と layout.tsx
|
| Docker対応 |
Dockerfile と docker-compose.yml
|
| ESLint + PostCSS |
.config.mjs による設定 |
| Makefile活用 | コマンド簡略化のためのスクリプト定義 |
まとめ
このような構成は、開発・テスト・本番環境を見据えたNext.jsプロジェクトとして非常に実践的だと思っています。
特にDockerやMakefileが組み込まれている点は、チーム開発やCI/CD導入にも適しており、保守性・再現性の高い開発基盤を構築できるのでおすすめです...！
今後プロジェクトを始める際や、他のリポジトリを参考にする際の判断材料になれば幸いです。