Next.js

2025年時点：Next.jsのディレクトリ構成のベストプラクティス

Next.jsはReactをベースにしたフルスタックフレームワークで、プロジェクトの規模が大きくなるとディレクトリ構成が重要になります。 構造を整理することで、可読性・保守性・チーム開発の効率が大幅に向上します。 この記事では、

#1. Next.jsの基本ディレクトリ

Next.jsプロジェクトを作成すると、デフォルトでは以下のような構成になります。

my-next-app/
├─ pages/
│  ├─ api/
│  └─ index.tsx
├─ public/
├─ styles/
├─ node_modules/
├─ package.json
└─ next.config.js
  • pages/: ページとAPIルートを定義
  • public/: 画像やフォントなどの静的リソース
  • styles/: グローバルCSS

しかし、プロジェクトが大きくなると pages/ にすべてを書き込むと管理が難しくなります。

#2. 最新のベストプラクティス

推奨ディレクトリ構成（例）

my-next-app/
├─ app/                     # Next.js 13+ App Router
│  ├─ layout.tsx            # 共通レイアウト
│  ├─ page.tsx              # トップページ
│  ├─ dashboard/
│  │  ├─ page.tsx
│  │  └─ settings/
│  │     └─ page.tsx
├─ components/              # 再利用コンポーネント
│  ├─ Button.tsx
│  ├─ Header.tsx
│  └─ Sidebar/
├─ hooks/                   # カスタムフック
│  └─ useAuth.ts
├─ lib/                     # APIクライアントやユーティリティ
│  └─ apiClient.ts
├─ services/                # ビジネスロジック
│  └─ authService.ts
├─ context/                 # React Context
│  └─ AuthContext.tsx
├─ types/                   # TypeScript型定義
│  └─ index.ts
├─ public/                  # 画像やフォントなどの静的ファイル
├─ styles/                  # グローバルスタイル
│  └─ globals.css
├─ tests/                   # ユニット・統合テスト
├─ package.json
└─ next.config.js

#3. 各ディレクトリの役割

3-1. app/

  • Next.js 13からの App Router 用ディレクトリ
  • ページやレイアウトを管理
  • サブディレクトリごとにネスト可能でURL構造と対応

3-2. components/

  • 再利用可能なUIコンポーネントを配置
  • 小さなコンポーネント単位で整理（Button, Card, Modalなど）

3-3. hooks/

  • カスタムフックをまとめる
  • useAuth や useFetch など共通処理

3-4. lib/

  • APIクライアントやユーティリティ関数
  • AxiosやFetchラッパー、共通関数をまとめる

3-5. services/

  • ビジネスロジックを集中管理
  • API呼び出しのラッパーや状態管理の処理をここにまとめる

3-6. context/

  • React Contextをここにまとめる
  • 認証情報やテーマ情報などグローバル状態を管理

3-7. types/

  • TypeScriptの型定義を集中管理
  • 型を各コンポーネントに散らさないことで保守性が向上

#4. プロジェクト規模別のアプローチ

小規模プロジェクト

  • app/ と components/ だけでも十分
  • HooksやContextも必要に応じて追加

中〜大規模プロジェクト

  • services/ と lib/ を分ける
  • 型定義は types/ にまとめる
  • テスト用の tests/ を用意してユニットテストと統合テストを整理

#5. まとめ

  • URL構造とディレクトリ構造を一致させる → App Routerのメリットを最大化
  • 再利用コンポーネントは**components/**に集約
  • ビジネスロジックとUIは分離 → 保守性が向上
  • 型定義は一箇所にまとめる → TypeScriptの恩恵を最大化

💡 ポイント

大規模Next.jsプロジェクトでは、「機能別にフォルダを分ける」より「役割別に分ける」 方が長期的に管理しやすいです。

タグ一覧