How to Structure a Next.js Project

Project structure is opinionated territory, but there are some patterns that work consistently well for Next.js App Router projects.

The Basic Structure

app/
  (public)/          # Public routes grouped
    page.tsx
    blog/
      page.tsx
  (admin)/           # Admin routes grouped
    admin/
      page.tsx
components/
  ui/                # Primitive UI components
  features/          # Feature-specific components
lib/
  db.ts              # Database client
  auth.ts            # Auth utilities
  utils.ts           # Generic utilities

Key Principles

Co-locate Related Things

Keep components with the routes that use them when they're not shared.

Separate Concerns

Business logic in lib/, UI in components/, routes in app/.

Use Route Groups

Route groups (folders wrapped in parentheses) let you organize routes without affecting the URL structure.

What to Avoid

• Deeply nested directories — more than 3-4 levels is a smell
• Mixing client and server components without clear boundaries
• Putting too much logic in route handlers — extract to lib/