Next.jsプロジェクトの基本フォルダ構成

Next.jsでは、ファイルベースのルーティングが重要な役割を果たしています。appディレクトリやpagesディレクトリがルーティングに関連するファイルを格納する中心的な場所です。また、componentsフォルダには再利用可能なUIコンポーネントを保存し、ファイルを適切に整理することで、コードの可読性と保守性が向上します。

基本的なフォルダ構成

src/
  ├── app/               # App Routerのルーティング
  ├── pages/             # 従来のPages Router
  ├── components/        # 再利用可能なコンポーネント
  ├── styles/            # グローバルおよびローカルスタイル
  ├── lib/               # ユーティリティやAPI関数
  └── public/            # 静的ファイル（画像やフォントなど）

機能ベースのファイル構成

スケーラブルなプロジェクトでは、コードを機能ごとに整理するのが効果的です。例えば、各ページや機能に関連するコンポーネントやスタイルをその機能に特化したフォルダにまとめると、ファイルの依存関係が明確になり、メンテナンスが容易になります。

機能ごとのフォルダ構成例

src/
  ├── features/
      ├── auth/
          ├── Login.tsx
          ├── Register.tsx
          └── authStyles.css
      ├── profile/
          ├── Profile.tsx
          └── profileStyles.css
  ├── shared/
      ├── components/
          ├── Button.tsx
          ├── Header.tsx
          └── Footer.tsx
      └── hooks/
          └── useAuth.ts

このように、各機能に対応するフォルダ内でコードを整理することで、拡張しやすい構造を作り上げます。

Atomic Designの導入

Atomic Designの概念を取り入れ、コンポーネントをatoms（最小単位のUI要素）、molecules（複数のatomsの組み合わせ）、organisms（より複雑なUIブロック）と分類することで、明確なルールに基づいたフォルダ構成を維持できます。これにより、再利用可能なコンポーネントの整理がしやすくなります。

Atomic Designを利用した構造

src/
  ├── components/
      ├── atoms/
          └── Button.tsx
      ├── molecules/
          └── FormField.tsx
      ├── organisms/
          └── SignUpForm.tsx
  ├── pages/
      └── signup.tsx

APIディレクトリの活用

pages/apiディレクトリを使って、サーバレスAPIを簡単に構築することもNext.jsの強みの一つです。データ取得や処理ロジックをAPIルートとして分離することで、クリーンなコードベースを維持できます。

まとめ

Next.jsでのプロジェクトのフォルダ構成は、スケーラビリティやメンテナンス性を高めるための重要な要素です。機能ベースでコードを整理し、Atomic Designやサーバレス機能を活用することで、効率的な開発を実現しましょう。