Nextjsでの適切なファイル構成および、api routesなどの設定方法についての自分なりのディレクトリ構成を説明できるようにする。 以下の記事が個人的にとてもしっくりきているのでそっくりそのまま使う
Next.js(App router)における開発しやすいディレクトリ構成の例 - TechDoctor開発者Blog
初めまして、テックドクターでフロントエンド開発を担当している大瀧です。ディレクトリ構成はコードの可読性やスケーラビリティに関わる重要な要素であると思っています。しかし、フロントエンドのディレクトリ構成...
src
|
+-- app # Routing files(Next.jsが標準で提供するファイル)
|
+-- components # 横断的(ドメインに依存しない)なUIコンポーネント
|
+-- features # 特定のドメイン・機能に関係するコンポーネント
|
+-- hooks # ドメインに依存しない、横断的なhooks
|
+-- providers # アプリケーションプロバイダーReactのContext [API](https://d.hatena.ne.jp/keyword/API)やその他のプロバイダーを配置します。グローバルな状態管理やテーマ設定など、アプリケーション全体で使用されるプロバイダーをここに集約します。
|
+-- utils # 横断的な汎用関数
|
+-- constants # 横断的な定数
|
+-- types # 横断的な型定義
|
+-- styles # スタイリング(css)に関するファイル
|
+-- lib # ライブラリの処理や標準処理を共通化したコード
|
+-- tests # 自動テスト関連