はじめに
今までreact単体のSPA構成でやっていたものの、webpackとかbabelの設定を試行錯誤しながら構築するのが面倒になったので、これを機にNextjsでスパッと構築できるようにテンプレートを作成しています。
その過程でディレクトリ構成を整理したので一例として共有します。
ディレクトリ構成
project_root/
├── docs/
├── public/
├── src/
│ ├── api/
│ │ ├── generated/
│ ├── components/
│ │ ├── atoms/
│ │ ├── molecules/
│ │ ├── organisms/
│ │ └── templates/
│ ├── foundations/
│ ├── hooks/
│ ├── lib/
│ ├── pages/
│ ├── stores/
│ ├── styles/
│ └── utils/
└── types/
- docs/
ドキュメントを配置する。
仕様書やOpenApi定義もここに配置する。
- public/
静的ファイルを配置する。
Nextjsで定義されたディレクトリ。
see: https://nextjs.org/docs/basic-features/static-file-serving
- src/api/
WebApi等の外部APIのクライアントを配置する。
自動生成されたApiのラッパーを作る時もここに配置する。
- src/api/generated/
OpenApi Generator等で自動生成されたクライアントを配置する。
- src/components/
UIコンポーネントを配置する。
Atomic Designの分類に基づいてコンポーネント振り分ける。
- src/components/atoms/
部品となる汎用UIコンポーネントを配置する。
単体で存在できるUIならここに配置する。
- src/components/molecules/
複数のUIコンポーネントを組み合わせたUIコンポーネントを配置する。
特定のコンテキストに依存しないようして再利用を考慮する。
UI制御のロジックが必要であればhooksを提供する。
- src/components/organisms/
特定のコンテキストに依存したUIコンポーネントを配置する。
再利用はあまり考えなくてもいい。
storesやapiに密結合していてもいい。
- src/components/templates/
ページ全体のスケルトンになるUIコンポーネントを配置する。
ページのアクセス制御やレイアウト等を含んだコンポーネント。
- src/foundations/
UIに直接関係しない機能のみのコンポーネントを配置する。
デザインを含まなければ、汎用的でもコンテキストに密結合でもどちらでもいい。
- src/hooks/
汎用的なreact hooksユーティリティを配置。
特定のコンテキストに依存しないようにする。
- src/lib/
モジュール化されたロジックを配置する。
lib間は依存してもいい。
それ以外のレイヤーには依存しないようにする。
- src/pages/
Nextjsでルーティングされるページコンポーネントを配置する。
see: https://nextjs.org/docs/routing/introduction
- src/stores/
グローバル状態を管理するhooksを配置する。
- src/styles/
全体のスタイルを配置する。
テーマや汎用的なスタイル要素を定義する。
- src/utils/
ユーティリティロジックを配置する。
- types/
typescriptのカスタム型定義を配置する。
おわりに
あくまで一例なのでプロジェクトに合わせて足したり引いたりしてください。
ディレクトリの定義も自分はこうしているというだけなので一番しっくりくるようにいい塩梅でやってください。
あと、Nextjsはいいぞ！
react単体だとCode Splittingとか色々頑張ってパフォーマンス調整をしていたのにNextjsは適当に作ってもだいたい速い。
あとSSGに方向を振ったおかげでSPA用のビルド環境として使えるのが強い。
まだSSRのフレームワークとして認知されているので導入提案しても最初はえぇ・・・？みたいな反応をされることもあるかと思います。
そんな時は圧を込めてNextjsはビルドツールです！！！と言い張りましょう。