著者(masa)が、自身が実装したビジネスマッチングサービスでの経験をもとに、Next.js App Routerにおける「変更の影響を境界で止める」ディレクトリ設計を提案しています。設計の軸は「コードが変わる理由」で、app/・features/・external/・components/の4区画に分け、それぞれの間に依存のルールを設けます。
app/はルーティングとアクセス制御のみを担い、ルートグループで認可を構造化します。features/はドメイン単位の機能本体でcomponents/、actions/、queries/から構成され、external/は外部API連携をclient/とhandler/に分離して扱います。components/はドメイン言語を含まない汎用部品を置く場所とされています。
著者は「フォルダを4つ作ること自体には意味がありません。大事なのは、4つの間に引いた依存のルール」と述べ、「ディレクトリ設計は整理整頓の話ではない。決めているのは、変更したときに何が壊れうるかの範囲」と説明しています。著者は過去にcomponents/が肥大化する失敗を経験しており、後から選考機能を追加した際には既存ファイルの変更がリンクの5行だけで済んだとのことです。
出典が伝えている要点
- 記事はNext.js App Routerにおけるディレクトリ設計を提案している
- 提案する設計では app/、features/、external/、components/ の4つの区画に分ける
- app/ はルーティングとアクセス制御のみを担い、ルートグループで認可を構造化する
- features/ はドメイン単位の機能本体で、components/、actions/、queries/で構成される
- external/ は外部API連携を扱い、client/とhandler/に分離される
- components/ はドメイン言語を含まない汎用部品を置く場所とされている
- 著者は分け方の軸を「コードが変わる理由」としている
- 著者はビジネスマッチングサービスを自ら実装した経験に基づいてこの設計を説明している
- 著者は過去に components/ が肥大化する失敗を一度経験したと述べている
- 著者は実務で関わったPages Routerのプロダクトで Apollo Client を導入した経験に言及している
- 著者は後から選考機能を追加した際、既存ファイルで変わったのはリンクの5行だけだったと述べている
原文より
設計で大事なのは「後からでも柔軟に変えられるか」だと思っています
フォルダを4つ作ること自体には意味がありません。大事なのは、4つの間に引いた依存のルール
ディレクトリ設計は整理整頓の話ではない。決めているのは、変更したときに何が壊れうるかの範囲
出典: zenn.dev