next.js
のバージョンは 12 を想定
.
├── components
│ ├── elements
│ │ └── utils
│ ├── layouts
│ └── page
├── config
├── const
├── docs
├── hooks
├── libs
├── pages
├── public
├── stores
├── test
├── types
└── utils
├── api
│ ├── del
│ ├── get
│ ├── post
│ └── put
└── auth
- アプリケーション全体で使うコンポーネントを置く
components/elements
components/layouts
とcomponents/page
で使うコンポーネントを置く
components/elements/utils
- アプリケーション全体で使う共通コンポーネントを置く
components/layouts
- アプリケーション全体で使うレイアウトコンポーネントを置く
- Header・Footer・管理者や一般ユーザーなどによってレイアウトを出し分ける Layout コンポーネントを置く
components/page
components/elements
とcomponents/layouts
を組み合わせたコンポーネントを置くpages
からはcomponents/page
のコンポーネントを読み込むだけ使える形にしたものを置く
- アプリケーション全体の設定を置く
- 主に CSS フレームワークの設定やライブラリの設定などを置く
- アプリケーション全体の定数を置く
- 開発時の注意事項、アイデアを置く
- react のカスタムフックを置く
- ライブラリ固有のコード、ラッパー、初期化や設定のコードなど、データ取得に絡まないコードを置く
- ライブラリ毎に切り替わる可能性もあるので、ライブラリごとにディレクトリを分ける
- Next のページコンポーネントを置く
- 静的ファイルを置く
- アプリケーション全体のグローバルステート、データフェッチライブラリの管理に使う設定を置く
- テストコードを置く
- type、interface を置く
- グローバルで使える関数を置く
utils/api
- HTTP リクエストを置く
- 必要であれば、各 HTTP リクエストディレクトリの中をページごとにディレクトリを分ける
utils/auth
- 認証系の処理を置く
- Next.js ディレクトリ構成・設計再考(features が何を解決するか)
- Setup TypeScript with React | React TypeScript Cheatsheets
- alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.
- Next.js のディレクトリ構成を考えてみた
- Nextjs プロジェクトのディレクトリ構成例をさらしてみる - Qiita
- Next.js 導入で責務の所在を明確化 READYFOR のフロントエンド分離戦略 - ログミー Tech