Next.jsのディレクトリ構成についてまとめてみた
はじめに
- Next.js バージョン: 12.0.0 以上
- App Routerを利用していること
背景
いくつかのプロジェクトを通じて、ディレクトリ構成が作業スピードやバグの発生率に与える影響を実感しました。分かりやすく整理された構成は、コードの読みやすさを向上させ、バグの発見と修正を迅速に行う手助けをしてくれます。そのため、今回はNext.jsプロジェクトに適したディレクトリ構成について紹介したいと思います。
ディレクトリ構成の種類
まずは、Reactプロジェクトでよく見られるディレクトリ構成を紹介します。この情報は、Luis Falconの記事から引用しています。
機能ベースの組織 (Feature-Based Organization)
/src ├── /auth │ ├── AuthForm.tsx │ ├── AuthAPI.ts │ └── ... ├── /dashboard │ ├── DashboardLayout.tsx │ ├── DashboardWidgets.tsx │ └── ... ├── /settings │ ├── SettingsForm.tsx │ ├── SettingsAPI.ts │ └── ... └── App.tsx
階層型（垂直型）組織 (Layered (Vertical) Organization)
/src ├── /components │ ├── Header.tsx │ ├── Sidebar.tsx │ └── ... ├── /containers │ ├── HomeContainer.tsx │ ├── DashboardContainer.tsx │ └── ... ├── /services │ ├── ApiService.ts │ ├── AuthService.ts │ └── ... └── App.tsx
ドメイン駆動設計 (Domain-Driven Design, DDD)
/src ├── /sales │ ├── SalesDashboard.tsx │ ├── SalesAPI.ts │ └── ... ├── /inventory │ ├── InventoryList.tsx │ ├── InventoryService.ts │ └── ... └── App.tsx
アトミックデザイン (Atomic Design)
/src ├── /atoms │ ├── Button.tsx │ ├── Input.tsx │ └── ... ├── /molecules │ ├── LoginForm.tsx │ ├── Navbar.tsx │ └── ... ├── /organisms │ ├── DashboardLayout.tsx │ ├── UserProfile.tsx │ └── ... └── App.tsx
直感的にわかりづらい？
上記のディレクトリ構成の種類を紹介しましたが、これらのアプローチは少し極端で直感的に分かりにくいかもしれません。それぞれの方法に利点がありますが、実際のプロジェクトに適用するとなると少し混乱することもあります。
自分の意見：おすすめのディレクトリ構成
私が関わったプロジェクトでは、機能ベース、階層型、コンポーネントベースの組み合わせが最も効果的でした。具体的には、以下のような構成です。
/src ├── /types │ ├── todo.ts ├── /context │ ├── todoContext.tsx ├── /components │ ├── /todos │ │ ├── TodoForm.tsx ├── /hooks │ ├── useTodoService.tsx ├── /todos │ ├── /[id] │ │ ├── page.tsx │ ├── page.tsx └── App.tsx
この構成の理由
- 機能ベースで整理: 機能ごとにディレクトリを分けることで、特定の機能に関連するファイルをまとめて管理でき、見つけやすくなります。
- 階層型での整理: コンポーネントやフック、コンテキストなどを階層ごとに整理することで、既存の実装に習いやすく、コードの一貫性を保ちやすくなります。
- コンポーネントベースの整理: 各コンポーネントを独立させることで、再利用性が高まり、テストやスタイルも一緒に管理できるようになります。
まとめ
最適なディレクトリ構成は、チームの開発方針やプロジェクトの特性によって変わります。一概に正解はありませんが、分かりやすく整理された構成は、作業効率の向上とバグの減少に寄与することは間違いありません。チームで話し合い、自分たちに最適な構成を見つけてください。
