NextJS 13 フォルダ構成

Next.js 13のApp Routerでは、新しいフォルダ構造やルーティングシステムが導入され、効率的なプロジェクト管理が可能になりました。本記事ではベストプラクティスを紹介します。

重要ポイント

• /appディレクトリはルート専用に最適化
• フォルダ命名規則で役割を明確化
• ルートグループで関連ページを整理

問題点

Next.js 13のApp Router導入時に以下の点で混乱が生じます：

1. ログイン/登録ページの配置場所
2. コンポーネントの整理方法
3. 関連コンポーネントのグルーピング
4. ルーティング構造の明確化
5. ファイル配置によるチームメンバーへの意図伝達

解決策

基本原則

my-project/
├── src/                  # 推奨: アプリコードの分離
│   ├── app/              # ルーティング専用
│   ├── components/       # 全コンポーネント
│   ├── lib/              # ユーティリティ
│   └── services/         # API通信（オプション）
├── public/
├── next.config.js
└── package.json

1. /appディレクトリの活用

ルーティング専用に使用し、内部をシンプルに保ちます：

src/app/
├── (auth)/               # ルートグループ
│   ├── login/
│   │   └── page.tsx      # /login
│   ├── register/
│   │   └── page.tsx      # /register
│   └── layout.tsx        # 認証共通レイアウト
├── dashboard/
│   └── page.tsx          # /dashboard
├── (admin)/              # 管理者用グループ
│   └── settings/
│       └── page.tsx      # /admin/settings
└── layout.tsx            # グローバルレイアウト

注意

ルートグループ（括弧()で囲んだフォルダ）はURLパスに含まれず、以下の用途で有用です：

• 共通レイアウトの共有
• 関連ルートの論理的分離
• 認証状態によるルーティング制御

2. コンポーネントの整理方法

src/components/
├── common/               # 汎用コンポンネント
│   ├── Button.tsx
│   └── Card.tsx
├── auth/                 # 認証関連
│   ├── LoginForm.tsx
│   └── RegisterForm.tsx
├── dashboard/            # ダッシュボード固有
│   ├── Widget.tsx
│   └── Chart.tsx
└── ui/                   # UI プリミティブ
    ├── Alert.tsx
    └── Dialog.tsx

3. /libディレクトリの活用

src/lib/
├── constants.ts          # 定数管理
├── types.ts              # TypeScript型定義
├── utils.ts              # 汎用関数
├── validators.ts         # バリデーション
└── fonts.ts              # フォント設定

高度な構成テクニック

プライベートフォルダの使用

非ルート関連ファイルには_プレフィックスを付加：

src/app/
├── _components/          # ルート用コンポーネント
├── _hooks/               # カスタムフック
├── _providers/           # プロバイダー
└── (routes)/
    └── marketplace/
        └── page.tsx

ルートグループの活用パターン

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="auth-container">
      {/* 認証ページ共通のUI */}
      {children}
    </div>
  )
}

推奨構成例

src/
├── app/
│   ├── (auth)/
│   │   ├── login/
│   │   │   └── page.tsx
│   │   ├── register/
│   │   │   └── page.tsx
│   │   └── layout.tsx
│   ├── dashboard/
│   │   └── page.tsx
│   ├── _components/      # ルート固有コンポーネント
│   ├── _test/            # ルート関連テスト
│   └── layout.tsx
├── components/
│   ├── common/
│   ├── ui/
│   └── shared/
├── lib/
│   ├── utils.ts
│   ├── types.ts
│   └── constants.ts
├── services/             # API通信層
├── stores/               # 状態管理（Zustand等）
└── styles/               # グローバルスタイル

ベストプラクティス

1. 一貫性の維持: チームで命名規則を統一
2. 分離の原則:
   • ルーティング: /app
   • 表示層: /components
   • ビジネスロジック: /lib, /services
3. スケーラビリティ: 機能追加時に迷いのない配置を
4. 自己文書化: フォルダ名で意図を明確化

公式ドキュメント:

• ルーティングのコロケーション
• ルートグループ

上記構造で開発効率と保守性を大幅に向上させられます。プロジェクト規模に応じて柔軟に段階適用してください。