Next.jsのディレクトリ構成を悩んだ結果…
こんにちは、大学1年のはるです
記事書くのも初めてだし、技術力も低いので、広〜い心で見てください
テーマ
自由度の高いNext.jsのディレクトリ構成をどうしようってなった話
使った技術周り
- Next.js (AppRouter)
- 外部API
AppRouterですが、外部に用意されたAPIを使うためフロント目的のみで利用しています
最終的な構成
├ app
│ ├ layout.tsx
│ ├ page.tsx // それぞれのページも
│ └ components
│ ├ elements
│ └ layouts
├ features
│ └ user // カテゴリ
│ ├ components
│ └ hooks
├ hooks
├ services
├ repositories
├ types
├ utills
前提、考えるための要件
この構成を考える際にどういう前提があったのか
自分が今回初めて学んだものたちです
- レイヤードアーキテクチャ
- 単一責任原則
- DRY
レイヤードアーキテクチャ
レイヤードアーキテクチャに全て従っているというより、参考にして依存関係を考えたという感じです
UI、ビジネスロジック、データアクセスなど適切に分離させることを意識
- UI
- それぞれのページコンポーネント
- components
- ビジネスロジック
- hooks
- services
- データアクセス
- repositories
単一責任原則とDRY
単一責任原則は
「1つに何個も仕事を押し付けるのはダメ！」ってことで
DRYは
「同じものならわざわざ作らず使いまわせ〜」ってこと笑
かなりゆるめな解釈ですけど、合ってはいますよね？
それぞれのディレクトリについて
やっと本題のディレクトリについてになります
/app/.../page.tsx
これは普通のページコンポーネントで、ルーティングごとにディレクトリを作ります
ここにはUIの大枠を作ったり、hooksを呼び出したりする場所です
/app/components
(app内に入れるべきかはよくわからん)
これはグローバルに使うコンポーネントをさらにelementsとlayoutsで分けています
elementsはボタンとかアイコンとかのいわゆるパーツって感じのもの
layoutsはナビゲーションとかのlayout.tsxに置かれるようなもの
/features
ここではカテゴリ別にhooksとcomponentsをまとめています
特定のページ用だったりで別のカテゴリでは使わないよなーってやつは、役割をはっきりさせます
/hooks
グローバルに使うカスタムフックです
まあfeaturesに分けれないものたちってことです
例えばログイン状態の確認するものは、どのページにアクセスしても使うものなので、カテゴリ分けできないですね
/services
ここではrepositoriesで取得したデータを受け取り、エラーかどうかでエラーメッセージを組み立てるところです
各hooks内で呼び出されます
/repositories
先ほども名前がありましたが、ここではfetchをして外部のAPIにデータアクセスするところです
それでレスポンスをservicesに渡します（正常なデータもエラーも）
/types
ここは名前の通り、型を定義するところですね
いつもtypeかinterfaceで悩んでおります…
/utils
React hookを使ってない関数などを入れてます
例えば、日付のフォーマットをする関数とか
ここに入れるのが正解なのかはわからないけど、グローバルで管理したい定数をconstants.tsとしてまとめてたりします
まとめ
本当にNext.jsはディレクトリ構造の自由度高すぎてどうすればいいのかわからなくなります
とりあえず今回はこれが結論となりました
概念とかの話はNext.jsに限らずなので、知れてよかったです
間違ってるところやご意見はコメントで教えてください
参考
Discussion