Back to Blog
AI & Tech

Our Next.js 14 SaaS Architecture: What We Use and Why

A technical deep-dive into the opinionated stack we've refined over 100+ projects.

JK

Jordan Kim

Head of Engineering at Velocity AI. Full-stack architect with 10+ years building scalable systems.

November 20, 2024
15 min read

After 100+ SaaS projects, we've landed on an opinionated stack that handles the vast majority of what clients need — without unnecessary complexity.

Here's the full architecture, and the reasoning behind every major decision.

The Foundation

Next.js 14 (App Router)

We moved to the App Router in early 2024 and haven't looked back. The key advantages:

  • Server Components eliminate unnecessary client-side JavaScript
  • Nested layouts solve the UI composition problem cleanly
  • Server Actions simplify form handling
  • Route Groups allow clean code organization without affecting URLs

The learning curve is real, but the productivity gains at scale are significant.

TypeScript — always

No exceptions. TypeScript's type system catches a category of bugs before they reach production. At the speed we move, that matters.

PostgreSQL + Prisma

PostgreSQL for the database, Prisma as the ORM. The combination gives us:

  • Type-safe queries that match our TypeScript codebase
  • Schema migrations that are easy to review and run
  • A clean model definition language that serves as documentation

We host on Supabase for smaller projects, Neon or RDS for larger ones.

Authentication

NextAuth.js v4

We've evaluated every auth solution. NextAuth remains our default because:

  • Handles Google OAuth, GitHub, email/password, and magic links
  • Prisma adapter integrates cleanly with our schema
  • JWT sessions with configurable expiry
  • Simple to add new providers

For projects requiring more complex auth (RBAC, enterprise SSO), we layer on top of NextAuth rather than replacing it.

Payments

Stripe

The default for subscriptions. Our standard implementation includes:

  • Product and price creation via API (not dashboard — everything is code)
  • Subscription management with plan changes and proration
  • Webhook handlers for all relevant events
  • Customer Portal for self-serve billing management

We have a reusable webhook handler module that we drop into every project. It handles all the idempotency concerns correctly.

Email

Resend + React Email

Resend for sending, React Email for templates. The combination is excellent:

  • Templates are React components — same language as the rest of the codebase
  • Preview in browser during development
  • Reliable delivery with excellent deliverability
  • Webhook support for tracking opens/clicks

File Storage

UploadThing

For most projects, UploadThing is the right choice: simple API, Next.js integration, reasonable pricing. For large media files or CDN requirements, we use Cloudflare R2.

Observability

Sentry for error tracking, PostHog for product analytics. Both integrate in minutes and provide essential visibility into production behavior.

Deployment

Vercel for the application, Supabase/Neon for the database, Upstash for Redis caching. This combination gives us:

  • Preview deployments on every PR
  • Edge functions when needed
  • Zero infrastructure management

For projects with specific compliance or performance requirements, we deploy to Railway or AWS.

The Philosophy

The best architecture is the one your team can move fast with. We chose this stack because it:

1. Has excellent TypeScript support throughout

2. Minimizes infrastructure overhead

3. Handles the common SaaS use cases without custom solutions

4. Has strong community support and documentation

The goal isn't to use the most interesting technology. The goal is to ship excellent products, reliably, at speed. This stack does that.

JK

Jordan Kim

Head of Engineering at Velocity AI. Full-stack architect with 10+ years building scalable systems.

Related Posts

Ready to Move Faster?

Let's build something that matters. Custom proposal in 24 hours.

Start a Project