React / Next.js を学んでいると「hooks」「utils」「lib」「store」などのフォルダをよく見るけど、最初は何を入れるのか混乱しがちです。
この記事では、それぞれのフォルダの意味や役割を整理し、プロジェクトを分かりやすく構成するための基本をまとめました。
📌 使用ツール
- Next.js
- TypeScript
- React
📌 ディレクトリ構造の役割まとめ
1.components
UI 部品をまとめる場所。
例：Button.tsx, Header.tsx, TodoCard.tsx
2.hooks
再利用可能な React Hooks を入れる。
UIは描画しないが、状態や副作用を共通化できる。
例：useAuthUser.ts, useToggle.ts
3.utils
純粋関数（計算やフォーマット処理など）。React に依存せず、入力→出力だけ。
例：formatDate.ts, calcDiscount.ts
4.lib
外部サービスやライブラリの設定・初期化処理。
例：supabaseClient.ts, axiosClient.ts
5.store
グローバル状態管理用（Zustand / Redux など）。
例：useUserStore.ts, useThemeStore.ts
6.types
型定義をまとめる。APIレスポンスやアプリ内データ型を整理。
例：user.ts, post.ts
7.consts（constants）
固定値をまとめる。マジックナンバーや文字列を直書きせずに管理。
例：CATEGORY_LIST.ts, ROUTES.ts, APP_NAME.ts
8.styles
グローバルCSSや共通スタイル。
例：globals.css
9.context
React Context を使った状態管理用。
例：AuthContext.tsx, ThemeContext.tsx
10.services
API 呼び出しやビジネスロジックをまとめる。
例：userService.ts, postService.ts
11.config
設定ファイルをまとめる。
例：env.ts, next.config.js
📌 まとめ
-
hooks→ 再利用可能な React ロジック -
utils→ 純粋関数（React 無関係） -
consts→ 固定値（文字列やリスト） -
lib→ 外部サービス接続 -
store→ グローバル状態管理 -
types→ 型定義 -
components→ UI 部品 -
services/config/context→ 必要に応じて追加
👉 最初はcomponents, hooks, utils, lib, store, types, consts を押さえておけば十分な気がしています。
チーム開発やアプリ規模に合わせて拡張していけばOKです！