General

Folder Structure

An overview of the project's organization and file structure.

The Pro Next.js Drizzle starter kit follows a clean and logical structure designed for scalability and ease of maintenance in a single-repo setup.

Directory Descriptions

app/

Next.js App Router directory containing all routes and pages. Uses route groups (marketing) and (saas) to organize public and protected pages.

components/

React components organized by feature. The ui/ subdirectory contains reusable UI primitives from shadcn/ui.

config/

Application configuration files. Each feature has its own configuration file for easy management.

content/

MDX content for blog posts, documentation and legal pages. Uses Content Collections for type-safe content management.

hooks/

Custom React hooks for shared functionality like session management, storage and theming.

lib/

Core business logic and service libraries. Each subdirectory represents a major feature:

  • auth/: Better Auth setup and utilities
  • billing/: Stripe integration and billing logic
  • db/: Drizzle ORM schema and client
  • email/: Email service and React Email templates
  • storage/: File storage service (S3-compatible)

schemas/

Zod validation schemas for form validation and API input validation. Organized by feature domain.

trpc/

tRPC API layer providing end-to-end type safety. Routers are organized by feature, and the context provides session and organization scoping.

types/

Shared TypeScript type definitions used across the application.

Highlights

  • (marketing) & (saas) Route Groups: Clearly separates public-facing pages from the protected dashboard application.
  • lib/ Directory: Centralizes all core services like database, authentication and billing, making them easy to test and maintain.
  • schemas/ Directory: Centralizes all Zod validation schemas for consistent validation across the application.
  • trpc/ Directory: Contains your entire API layer, ensuring end-to-end type safety with React Query integration.
  • components/ui/: Houses reusable UI primitives, following the shadcn/ui pattern.
  • hooks/ Directory: Custom React hooks for shared functionality, reducing code duplication.