Next.jsの通常のディレクトリ構造とmonorepoでのディレクトリ構造

monorepoとは

monorepoとは、複数のパッケージやアプリケーションを1つのリポジトリで管理する開発手法です。これにより、コードの再利用性が高まり、開発スピードが向上します。

Next.jsプロジェクトのディレクトリ構造

通常、Next.jsプロジェクトは以下のようなディレクトリ構造を持ちます。

my-app/
  ├── node_modules/
  ├── pages/
  ├── public/
  ├── styles/
  ├── package.json
  └── next.config.js

• pages: ルーティングに対応するReactコンポーネントを配置する
• public: 静的ファイル（画像, フォントなど）を配置する
• styles: グローバルなCSSファイルを配置する

monorepoでのディレクトリ構造

monorepoでNext.jsアプリを管理する場合、以下のようなディレクトリ構造になります。

my-monorepo/
  ├── node_modules/
  ├── packages/
  │   ├── app/
  │   │   ├── pages/
  │   │   ├── public/
  │   │   ├── styles/
  │   │   ├── package.json
  │   │   └── next.config.js
  │   ├── api/
  │   └── common/
  ├── package.json
  └── yarn.lock

• packages: 各パッケージ（アプリ, APIサーバー, 共通ライブラリ）を配置する
  • app: Next.jsアプリケーション
  • api: APIサーバー
  • common: 複数のパッケージ間で共有するコード

この構成により、以下のようなメリットがあります。

• パッケージ間で共通のコードをcommonに切り出し、再利用できる
• アプリとAPIサーバーを独立して開発・デプロイできる
• 各パッケージの依存関係を明確に管理できる

まとめ

monorepoを採用することで、Next.jsアプリを含む複数のパッケージを一元的に管理できます。packagesディレクトリ内に各パッケージを配置し、共通のコードはcommonに切り出すことで、コードの再利用性と開発効率を高めることができます。