Next.jsプロジェクトで`src`ディレクトリを作成するか？比較とユースケース別推奨

はじめに

Next.jsを使ったプロジェクト作成時に、srcディレクトリを作成するかどうかを問われることがあります。初学者の私は脳死でデフォルトの”利用しない”を選択しています。この記事では、srcディレクトリを作成する場合としない場合のメリット・デメリットを掘り下げ、ユースケース別にどちらを選ぶべきかを解説します。

結論

• 短期的・小規模プロジェクトや学習目的では、シンプルなsrcなし構成を採用するのが合理的です。Next.jsのデフォルト構成で効率的に開発を進められます。
• 長期的・大規模プロジェクトやチーム開発では、srcディレクトリを作成することで拡張性と保守性を確保できます。

srcディレクトリを作成する場合

メリット

1. プロジェクト構造の明確化

   • ソースコードがsrc以下に集約されるため、設定ファイルやテストコードなどと明確に分離できる
   • プロジェクトが大規模化してもフォルダ構造がわかりやすい

2. スケーラビリティと保守性

   • コンポーネントやユーティリティ、APIロジックなどを整理しやすく、長期的な運用でも保守性が高い

3. 他フレームワークとの一貫性

   • ReactやVue、Angularなどの他フレームワークでも採用されている構造で、フロントエンド開発者にとって馴染み深い

4. チーム開発における明確な指針

   • 「アプリケーションの実装はすべてsrc内に配置する」というルールを定めやすく、チーム間での認識を統一しやすい

デメリット

1. ディレクトリ階層が深くなる

   • pages/ディレクトリがsrc/pages/のように深くなるため、ファイルパスの記述が長くなる場合がある

2. 追加設定が必要なケースがある

   • JestやESLint、Vercelの設定をカスタマイズする必要が生じる場合がある

3. 初心者にはやや複雑

   • 小規模プロジェクトや学習目的ではフォルダ構成が過剰に感じられる可能性がある

---

srcディレクトリを作成しない場合

メリット

1. シンプルな構造

   • デフォルトでpages/やapp/がルート直下に配置されるため、設定不要でわかりやすい

2. 学習コストが低い

   • Next.jsを学び始めたばかりの初心者でも、公式ドキュメントに準拠した構造でスムーズに開発を進められる

3. 迅速なプロトタイピング

   • 初期段階で迅速に開発を進めるのに最適

デメリット

1. スケーラビリティの限界

   • プロジェクトが大規模化すると、ファイルがルート直下に散在し、管理が煩雑になる可能性がある

2. チーム開発での混乱

   • 他フレームワーク出身者にとってはsrcがない構造が不自然に感じられることがある

3. ツールや設定との相性

   • テストコードやStorybookなど、外部ツールの設定でsrc構造を前提とするものがある場合、後から構成を変更する必要が生じる可能性がある

---

ユースケース別推奨構成

以下は、プロジェクト規模や開発体制に応じた推奨構成です。

ユースケース	プロジェクト規模	チーム構成人数	推奨構成	理由
学習目的／個人検証	小規模～中規模	1人（少人数）	srcなし	デフォルト構成で学習コストを抑えられる。
短期プロジェクト／PoC	小規模	1〜数人	srcなし	迅速な開発が求められるため、余分な設定が不要。
スタートアップ／成長が見込まれる場合	中規模～大規模	チーム拡大中	srcあり	拡張性を担保し、将来的にフォルダを増やしやすい構成を採用。
長期運用を前提とした企業プロジェクト	大規模	10人以上	srcあり	長期的な保守性と管理のしやすさが重要。
モノレポ構成 (Turborepo / Nx等)	小規模〜大規模	チーム規模問わず	srcあり	他のアプリケーションやパッケージとの整合性を保つため。

---

参考:

• Next.js公式ドキュメント: https://nextjs.org/docs
• Turborepo公式サイト: https://turbo.build/repo