The Exact Next.js Project Structure for a SaaS App (2026)

After building multiple SaaS products, this is the file structure that scales from MVP to production. The Structure src/ ├── app/ │ ├── (app)/ # Authenticated (shared sidebar layout) │ │ ├── layout.tsx │ │ ├── dashboard/page.tsx │ │ ├── settings/page.tsx │ │ └── billing/page.tsx │ ├── (auth)/ # Auth (centered minimal layout) │ │ ├── login/page.tsx │ │ └── register/page.tsx │ ├── (marketing)/ # Public (marketing nav/footer) │ │ ├── pricing/page.tsx │ │ └── blog/page.tsx │ ├── api/ │ │ ├── auth/[...nextauth]/ # Auth handler │ │ ├── stripe/ # Billing webhooks │ │ └── ai/chat/ # AI endpoint │ ├── layout.tsx # Root layout │ └── page.tsx # Landing page ├── components/ │ ├── ui/ # Button, Input, Card, Badge │ ├── layout/ # Nav, Sidebar, Footer │ └── ai/ # Chat interface ├── lib/ │ ├── auth.ts # Auth config │ ├── db.ts # Prisma singleton │ ├── stripe.ts # Stripe + plans │ └── utils.ts # cn(), formatDate() ├── prisma/ │ └── schema.prisma └── types/ └── next-auth.d.ts Why route groups Parenthesi