풀스택 앱 구조
폴더 구조중급
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 패턴은 복잡한 개발 시나리오를 효과적으로 다루기 위한 검증된 아키텍처 설계와 워크플로우 구조입니다. 풀스택 앱 구조은(는) 중급 수준의 폴더 구조 패턴으로, 프로젝트에 맞게 응용할 수 있는 테스트된 반복 가능한 접근 방식을 제공하여 더 효율적이고 일관된 결과를 만들어 냅니다.