React / Next.js を学んでいると「hooks」「utils」「lib」「store」などのフォルダをよく見るけど、最初は何を入れるのか混乱しがちです。

この記事では、それぞれのフォルダの意味や役割を整理し、プロジェクトを分かりやすく構成するための基本をまとめました。

UI 部品をまとめる場所。
例：Button.tsx, Header.tsx, TodoCard.tsx

再利用可能な React Hooks を入れる。
UIは描画しないが、状態や副作用を共通化できる。
例：useAuthUser.ts, useToggle.ts

純粋関数（計算やフォーマット処理など）。React に依存せず、入力→出力だけ。
例：formatDate.ts, calcDiscount.ts

外部サービスやライブラリの設定・初期化処理。
例：supabaseClient.ts, axiosClient.ts

グローバル状態管理用（Zustand / Redux など）。
例：useUserStore.ts, useThemeStore.ts

型定義をまとめる。APIレスポンスやアプリ内データ型を整理。
例：user.ts, post.ts

固定値をまとめる。マジックナンバーや文字列を直書きせずに管理。
例：CATEGORY_LIST.ts, ROUTES.ts, APP_NAME.ts

グローバルCSSや共通スタイル。
例：globals.css

React Context を使った状態管理用。
例：AuthContext.tsx, ThemeContext.tsx

API 呼び出しやビジネスロジックをまとめる。
例：userService.ts, postService.ts

設定ファイルをまとめる。
例：env.ts, next.config.js

👉 最初はcomponents, hooks, utils, lib, store, types, consts を押さえておけば十分な気がしています。

チーム開発やアプリ規模に合わせて拡張していけばOKです！