Next.js 13の ディレクトリ構成
結論
フォルダ、ファイル名はケバブケース
*component名はパスカルケース
↓構造
code:/
├── app/
├── /**/_components/ // components
├── /**/_lib/ // ライブラリに依存する関数
├── /**/_hooks/ // hooks
├── /**/_functions/ // 関数
フォルダ名, フィイル名はケバブケース
app routerを用いるため、dir 構成が url になるから
case sensitive
shadcn/uiもそう
機能やルートごと
feature branch
ファイルの種類ごとに分ける
atomic design
とりあえず作って後から考える
Next.jsの tech leadの見解
app=pages+features
じゃぁ app routerの routeごとに論理的な境界を儲けるみたいな考え方でもよさそう
ページの見通しは悪くなるなぁ
app直下のディレクトリは論理的な境界がないglobalな位置付けで使いたい
component
配置場所
アプリケーション内で再利用生のあるコンポーネント。
/app/_components にフラットに置く
ルール
アトミックデザインでいう atoms, mole
common ui と言っても差し支え無さそう
外部との通信は行わない
ビジネスロジックは持たない(UIに関するロジックはok)
vercel のテンプレートでは/app, /components みたいな感じで並列で置かれているやつがある。
vercel の中の人は /app/_components の方が良かったといっている
アプリケーションの中で汎用的に使われるんだから/appで良いよねっていう理屈みたい。
正直好みであるが個人的に root dir が散らかるので /app で良さそう。
その他使う場所で app/**/_components/ を切って置く
同じフォルダかそれより下のものだけ参照できる
依存の向きを制限することでシンプル
循環参照も構造的に起きない
詳細
components/<component name>/{index, stories, test}.tsx を同一階層に置く
コンポーネント自体はパスカルケースで書く慣習らしい