フルスタックアプリ構成
フォルダ構成中級
Next.jsで構築された最新のフルスタックアプリはフロントエンドとバックエンドの境界が曖昧です。この構成パターンはServer Action、APIルート、共有型、UIコンポーネントがどこにあるかClaude Codeが理解できるよう明確な境界を設定します。小規模プロジェクトから大規模プロダクションアプリまでスケールしつつ、コードベースのナビゲーション性を維持します。
Next.jsフルスタックReactApp Routerフォルダ構成
パターンコード
my-app/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── (auth)/ # Route group: auth pages
│ │ │ ├── login/page.tsx
│ │ │ └── signup/page.tsx
│ │ ├── (dashboard)/ # Route group: authed pages
│ │ │ ├── layout.tsx # Shared dashboard layout
│ │ │ ├── page.tsx # Dashboard home
│ │ │ └── settings/page.tsx
│ │ ├── api/ # API routes (if needed)
│ │ │ └── webhooks/route.ts
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Landing page
│ ├── components/
│ │ ├── ui/ # Primitive UI (Button, Input, Card)
│ │ ├── forms/ # Form-specific components
│ │ ├── layout/ # Header, Footer, Sidebar
│ │ └── features/ # Feature-specific components
│ │ ├── dashboard/
│ │ └── settings/
│ ├── lib/ # Shared utilities
│ │ ├── db.ts # Database client
│ │ ├── auth.ts # Auth helpers
│ │ └── utils.ts # General utilities
│ ├── server/ # Server-only code
│ │ ├── actions/ # Server Actions
│ │ │ ├── user.ts
│ │ │ └── settings.ts
│ │ └── queries/ # Database queries
│ │ └── user.ts
│ ├── hooks/ # React custom hooks
│ ├── types/ # Shared TypeScript types
│ └── styles/ # Global styles
├── public/ # Static assets
├── CLAUDE.md
├── next.config.ts
└── package.json
# CLAUDE.md excerpt:
# - components/ui/ = shadcn/ui primitives. Do not modify directly.
# - components/features/ = feature-specific. One folder per feature.
# - server/actions/ = all mutations. Use "use server" directive.
# - server/queries/ = all reads. Import in Server Components only.
# - lib/ = isomorphic code. No server-only imports here.
このパターンをプロジェクト設定にコピーして適用してください。
実行プレビュー
フルスタックアプリ構成
フルスタックアプリ構成について
Claude Codeパターンは、複雑な開発シナリオに対応するための実証済みアーキテクチャ設計とワークフロー構造です。フルスタックアプリ構成は中級レベルのフォルダ構成パターンで、プロジェクトに合わせて応用できるテスト済みの再現可能なアプローチを提供し、より効率的で一貫した成果を実現します。