前回の記事の続きです。
Vibe Coding に最適な Next.js と Claude Code に向けて、リポジトリ運用方針を整理します。
モノレポ VS マルチレポ
モノレポ(Monorepo)とは、すべてのコードを一つの巨大リポジトリで管理すること。依存関係の把握や一括ビルド、CI/CD の統合が容易になるという利点があル。
かつてはモノレポも許容していたが、ポストAI開発は租結合なマルチレポが最適解だと確信している。
つまり、プロダクトの構成要素を分解し、それぞれ独立したリポジトリで開発・管理すべき。
プロジェクト単位のコード量削減だけでなく、「単一の責務に特化させる」ことでAIがコンテキストを把握しやすくなる。
なぜマルチレポが AI 時代に最適なのか
AI は自然言語だけでなく、コンテキスト(文脈)を前提にコードを理解・生成する。その際、巨大なモノレポでは「不要な情報」がノイズとなり、AIのパフォーマンス低下を誘発する。
一方で、リポジトリを疎結合・単一責務で分割すれば、AI にとって明快な作業単位となる。
- 学習・推論コストを抑えやすい(トークン節約)
- 作業単位ごとに明示的な目的があるため、指示が抽象化しすぎない
- リポジトリ間の干渉がないため、破壊的変更リスクが抑えられる
- 並列開発・並列 AI 実行が容易
「AI に特定のディレクトリ配下のみ読み取るように指示すれば良いのでは?」と思うだろうが、そう単純ではない。
実際には、明確に指示をしても AI が勝手に関係ないディレクトリまでディレクトリを読みに行く事が多々ある。
おそらくプロンプトや Rules の設定で完全に防ぐことは難しく、いっそリポジトリを分割することが最も明確なソリューションではないか。
Next.js プロダクトのマルチレポ構成例
たとえば、Next.js を使って Web プロダクトを構築する場合は以下のような構成が可能。
(スモールチームによる立ち上げ期やMVP開発を想定)
LP(xxx.com
)
- 目的:SEOや被リンクの宛先
- 構成:SSG、静的デプロイ
- 特徴:開発頻度は低いが、SEO とブランドの起点となる重要領域
- チームリソース: PM+デザイナー。あるいはPMのみ(エンジニアリソースは割かない)
App(app.xxx.com
)
- 目的:2C 向けのコアプロダクト
- 構成:SPA、高頻度更新、状態管理
- 特徴:最も多くの開発リソースを投入、AI 活用も進む領域
- チームリソース: PM + エンジニア。PMFまでデザイナーリソースは割かない
Admin(admin.xxx.com
)
- 目的:内部向け管理ツール(2B 運用)
- 構成:SPA、ロールベースのアクセス管理
- 特徴:UI は最低限。Bizタスクの効率化
- チームリソース: PM + エンジニア。デザイナーリソースは割かない
各ドメインが単一責務を担い、技術構成・デザイン方針も異なるため、リポジトリを分けることに合理性がある。
設計方針
デザインシステムの共有は最小限でよい
「共通化」は効率的に見えてボトルネックになる。変更の伝播による副作用リスクが大きい。
特に LP と App では UI 要件がまったく異なるため、切り離した方が合理的。
LP のデザインは世界観を表現したり、感情へ訴求するためにリッチなデザインも有効。
一方、App の UX デザインとは意味と状態を伝えるための実用的なガイド(AI の言い回しを借りると「視覚的トークン」)。
API ルートの扱い
ここは好みで良いが、基本的にはNext.js の API Routes は、各リポジトリにスコープ内で実装する。
共通ロジックやバッチ、Cloud Functions も別途独立リポジトリで管理し、API Gateway や内部 RPC で接続しても良い。エンジニアの好みに任せる。
チームのタスク分割やAI エージェント活用にも有利
複数のリポジトリを持つことで、それぞれを独立して作業可能。
チーム内で責任者を分割しやすい。
兼務する場合でも、AI Agentによる開発を並列実行しやすい。
- App 開発中の AI エージェントと、LP 改善用の AI エージェントが並列稼働
- Pull Request レビューやテスト生成など、責務ごとのルールに従った精密なアウトプット
- 失敗しても被害が局所化するため、実験的な施策もリスクが小さい
おわりに
今後は間違いなくAI主導の開発がデファクトになる。
人間のエンジニアに対する最適化ではなく、AIに対する最適化という観点で技術スタックや開発フローを見直す必要がある。
リポジトリ管理においては、疎結合・単責務のマルチレポ構成こそが最適 と主張する。
参考
シリーズ記事
Claude Codeを使用した開発フロー(特にdApps)に最適なテンプレートを構築中で、各項目についてメモを残しています。
- Claude Code x MVP開発に最適なdApps要求定義
- Claude Code x MVP開発に最適なNext.jsディレクトリ構成
- Claude Code x MVP開発に最適なUXデザインガイド
- Claude Code x MVP開発に最適なNext.jsの状態管理パターン [Zustand, React Hook Form, TanStack Query]
- Claude Code x MVP開発の作業フロー(のメモ)
- AO dApps × Next.jsのnpmライブラリ選定 [2025年]
- EVM dApps x Next.jsのnpmライブラリ選定 [2025 年]
- Solana dApps × Next.jsのnpmライブラリ選定 [2025年]
参考文献
『LLMのプロンプトエンジニアリング ―GitHub Copilotを生んだ開発者が教える生成AIアプリケーション開発』
『生成AIのプロンプトエンジニアリング ―信頼できる生成AIの出力を得るための普遍的な入力の原則』
『開発者とアーキテクトのためのコミュニケーションガイド ―パターンで学ぶ情報伝達術』