Get the kit
Free tools
Next.js project structure generator

Generate a scalable Next.js SaaS folder structure.

Build a clean architecture for auth, billing, dashboard pages, API routes, database code, and shared components.

Pick the architecture choices for your app. The generated structure is optimized for a Next.js SaaS boilerplate with clear auth, billing, dashboard, and API boundaries.

Scalable Next.js architecture

my-saas-app/
  app/
    (dashboard)/
      dashboard/
        billing/
          page.tsx
        settings/
          page.tsx
        page.tsx
    (marketing)/
      pricing/
        page.tsx
      page.tsx
    api/
      account/
        route.ts
      auth/
        [...nextauth]/
          route.ts
      billing/
        checkout/
          route.ts
      health/
        route.ts
      users/
        route.ts
      webhooks/
        stripe/
          route.ts
  components/
    layout/
      app-sidebar.tsx
      top-nav.tsx
    ui/
      button.tsx
      card.tsx
  lib/
    analytics/
      events.ts
    auth/
      options.ts
      session.ts
    billing/
      plans.ts
      stripe.ts
    config/
      site.ts
    db/
      prisma.ts
    email/
      send.ts
    env.ts
  prisma/
    migrations/
      .gitkeep
    schema.prisma
  types/
    index.ts

Auth

  • Keep auth helpers in lib/auth so UI and API code share one session contract.
  • Protect dashboard routes at the layout or middleware layer.
  • Keep provider callbacks out of feature components.

Billing

  • Keep provider SDK clients in lib/billing.
  • Handle checkout and portal routes server-side.
  • Update subscription access from verified webhook events.

Dashboard

  • Group authenticated pages under a dashboard route group or folder.
  • Share dashboard chrome through layout components.
  • Keep settings and billing screens separate from the main product workflow.

API Routes

  • Keep public API routes thin and move business logic into lib or server modules.
  • Use route handlers for webhooks and external integrations.
  • Add a health endpoint for deployment checks.

Architecture rules

  • Put reusable UI in components/ui and product-specific layout in components/layout.
  • Put business logic in lib or server modules, not directly inside page components.
  • Keep webhook handlers isolated because they need raw request handling and provider-specific verification.
  • Store environment parsing in one file so missing keys fail early.
  • Prefer route groups for marketing, auth, and dashboard surfaces in the App Router.