Full-Stack App Structure

Folder StructureIntermediate

Modern full-stack apps built with Next.js blur the line between frontend and backend. This structure pattern establishes clear boundaries that help Claude Code understand where server actions, API routes, shared types, and UI components live. It scales from small projects to large production apps while keeping the codebase navigable.

next.jsfullstackreactapp-routerfolder-structure

Pattern Code

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.

Copy this pattern into your project configuration to implement.

Terminal Preview

Full-Stack App Structure

About Full-Stack App Structure

Claude Code patterns are proven architectural designs and workflow structures that help you tackle complex development scenarios. Full-Stack App Structure is a Folder Structure pattern at the Intermediate level that provides a tested, repeatable approach you can adapt to your projects for more efficient and consistent results.

Related Patterns

REST API Project Structure

Battle-tested folder structure for Node.js/Express or Fastify REST API projects with clear separation of concerns.

Monorepo Structure

Turborepo/pnpm workspace monorepo structure with shared packages, apps, and layered CLAUDE.md files.

Documentation Project Structure

Structured folder layout for large documentation projects — reports, proposals, research papers, and knowledge bases.