organizing-project-files

プロジェクトファイルの整理

可能な場合は機能ごとに関連ファイルをまとめます。本当に共有されるコードのみ、種類ごとにグループ化します。

標準的な構成

src/
├── app/                    # Next.js App Router (or pages/)
├── components/
│   ├── ui/                 # Reusable primitives (Button, Modal)
│   └── [feature]/          # Feature-specific (auth/, dashboard/)
├── hooks/                  # Custom React hooks
├── lib/                    # Core utilities, clients, constants
├── services/               # API calls, external integrations
├── stores/                 # State management
└── types/                  # TypeScript definitions

配置のクイックリファレンス

「必要なもの」	場所
ボタン	components/ui/Button.tsx
ログインフォーム	components/auth/LoginForm.tsx
ユーザーデータの取得	services/user.ts または hooks/queries/useUser.ts
日付フォーマッター	lib/utils.ts
認証状態	stores/auth.ts
Supabase の型	types/supabase.ts（生成済み）
カスタム型	types/index.ts または関連ファイルと同じ場所

命名規則

• コンポーネント：PascalCase.tsx
• フック：useCamelCase.ts
• ユーティリティ：camelCase.ts
• 型：camelCase.ts

関連ファイルをまとめるパターン

複雑な機能では、関連ファイルをまとめて配置します。

components/auth/
├── LoginForm.tsx
├── LoginForm.test.tsx
├── useLoginForm.ts
└── login-schema.ts

応用パターン

App Router の詳細、バレルファイル、モノレポ構成については、PATTERNS.md を参照してください。