Recommended stack · Excellent for bootstrapping

Modern TypeScript SaaS

A cohesive TypeScript web stack for shipping a subscription product with managed infrastructure.

Responsibilities: 6
Open source: 5 choices
Self-hostable: 5 choices

What it is for

Use an integrated React framework for the product surface, PostgreSQL for durable application data, application-owned authentication, utility-first styling, managed deployment, and focused error monitoring. The choices optimize for one language across the application and fast feedback from preview to production.

Who should use it

Small TypeScript product teams that want strong defaults and limited infrastructure work.

From decision to first build

Start with this stack.

Choose the pieces you want, then copy the build prompt into your coding assistant. No account needed.

Optional capabilities start as “Not needed”. Hosted providers add external dependencies, including to the open-source stack.

Package manager: pnpm. All TypeScript setup, script, and CI instructions use pnpm.

What are you building?

Application framework

Next.js supplies React rendering, routing, server behavior, and production-oriented conventions in one TypeScript application boundary.

Open SourceRead the source ↗

Database

PostgreSQL is a durable relational default with strong constraints, transactions, indexing, and a broad managed-hosting ecosystem.

Open SourceRead the source ↗

Authentication

Application-owned authentication. Mount the Next.js App Router auth handler, configure a supported database adapter, and validate sessions on the server. Use nextCookies last in the plugin list if Server Actions set cookies.

Open-source core; you operate the database, email delivery, and authentication infrastructure.Read the source ↗

Styling

Tailwind CSS gives a small product team a constrained styling vocabulary without requiring a separate component runtime.

Open SourceRead the source ↗

Deployment

Vercel minimizes early deployment work for preview environments and globally delivered web applications.

Generous Free TierRead the source ↗

Error monitoring

Sentry turns releases and application exceptions into an actionable product-engineering workflow.

Generous Free TierRead the source ↗

Identity verification (KYC) · Not needed

Identity verification (KYC)

Optional — add only when your product needs this capability.

Billing · Not needed

Billing

Optional — add only when your product needs this capability.

Transactional email · Not needed

Transactional email

Optional — add only when your product needs this capability.

File storage · Not needed

File storage

Optional — add only when your product needs this capability.

Background jobs · Not needed

Background jobs

Optional — add only when your product needs this capability.

Product analytics · Not needed

Product analytics

Optional — add only when your product needs this capability.

API contracts · Not needed

API contracts

Optional — add only when your product needs this capability.

Monorepo tooling · Not needed

Monorepo tooling

Optional — add only when your product needs this capability.

Agent integration · Not needed

Agent integration

Optional — add only when your product needs this capability.

Agent instructions · Not needed

Agent instructions

Optional — add only when your product needs this capability.

AI example · Not needed

AI example

Optional — add only when your product needs this capability.

CRUD example · Not needed

CRUD example

Optional — add only when your product needs this capability.

Data access / ORM · Not needed

Data access / ORM

Optional — add only when your product needs this capability.

Database hosting · Not needed

Database hosting

Optional — add only when your product needs this capability.

Documentation · Not needed

Documentation

Optional — add only when your product needs this capability.

Next.js includes React. The extra authentication and UI options are researched for Next.js; they disappear if you switch to another framework.

# Build with Modern TypeScript SaaS

Product brief: A cohesive TypeScript web stack for shipping a subscription product with managed infrastructure.
Target user: Small TypeScript product teams that want strong defaults and limited infrastructure work.

## Selected technologies
- Language: TypeScript with strict checking.
- Package manager: pnpm (required). Use pnpm, not npm, npx, Yarn or Bun package-manager commands, for installation, scaffolding, scripts, examples, documentation and CI. Pin a compatible pnpm version in package.json packageManager, commit pnpm-lock.yaml, and use pnpm install --frozen-lockfile in CI. Use pnpm add, pnpm exec and the pinned version’s supported pnpm scaffolding command. Preserve existing work; do not delete or replace another lockfile without explicit migration approval.
- Package-manager reference: https://pnpm.io/installation
- UI library: React, through the Next.js App Router framework. React alone is not the full-stack framework.
- Application framework: Next.js
  Integration: Next.js supplies React rendering, routing, server behavior, and production-oriented conventions in one TypeScript application boundary.
  Cost context: Open Source
  Reference: https://howtobuild.dev/projects/nextjs
- Database: PostgreSQL
  Integration: PostgreSQL is a durable relational default with strong constraints, transactions, indexing, and a broad managed-hosting ecosystem.
  Cost context: Open Source
  Reference: https://howtobuild.dev/projects/postgresql
- Authentication: Better Auth
  Integration: Application-owned authentication. Mount the Next.js App Router auth handler, configure a supported database adapter, and validate sessions on the server. Use nextCookies last in the plugin list if Server Actions set cookies.
  Cost context: Open-source core; you operate the database, email delivery, and authentication infrastructure.
  Reference: https://better-auth.com/docs/integrations/next
- Styling: Tailwind CSS
  Integration: Tailwind CSS gives a small product team a constrained styling vocabulary without requiring a separate component runtime.
  Cost context: Open Source
  Reference: https://howtobuild.dev/projects/tailwind-css
- Deployment: Vercel
  Integration: Vercel minimizes early deployment work for preview environments and globally delivered web applications.
  Cost context: Generous Free Tier
  Reference: https://howtobuild.dev/projects/vercel
- Error monitoring: Sentry
  Integration: Sentry turns releases and application exceptions into an actionable product-engineering workflow.
  Cost context: Generous Free Tier
  Reference: https://howtobuild.dev/projects/sentry

## Implementation brief
1. Inspect the current repository and its instructions. Explain the architecture and verify the current official installation guides and package compatibility for the selected choices. Preserve existing work.
2. Implement one useful vertical slice with a responsive, accessible interface, loading/empty/error states, and a clear README. Use only the selected provider for each responsibility. Do not silently substitute another stack.
3. If authentication is selected, enforce authorization on the server. Implement sign-in, sign-out, session handling, and protected data access. Keep provider secrets server-side and document required environment variables.
4. Document data models and migration commands. Do not provision paid services, deploy, or modify an existing database without explicit authorization. Use placeholders in .env.example and never invent API keys.
5. Validate with the repository’s allowed checks and record their results. Document what remains dependent on account setup, credentials, or deployment.
6. Do not add optional providers that were not selected. For external integrations, keep secrets server-side, verify webhook signatures, and make event handling idempotent. Hosted add-ons change the base stack’s self-hosting and cost assumptions.

## Base stack tradeoffs (reassess when a choice is replaced)
- The framework and hosting platform are closely aligned, which increases platform coupling.
- Application-owned authentication gives control but also leaves security operations with the product team.
- This stack favors TypeScript breadth over specialized backend languages.
- These selections customize the editorial stack. Recheck integration boundaries when replacing a component; hosted free tiers are not a promise of free production operation.

## Stack references
- https://howtobuild.dev/stacks/modern-typescript-saas
- Framework capabilities and deployment model: https://nextjs.org/docs
- Authentication architecture and supported database adapters: https://www.better-auth.com/docs

Updates as you choose your technologies.

Responsibility map

One choice for each job.

01
Application framework
Next.js
Next.js supplies React rendering, routing, server behavior, and production-oriented conventions in one TypeScript application boundary.
Open sourceOpen SourceSelf-hostable
Alternatives
Astro — Choose Astro when content delivery matters more than a uniformly interactive React application.
02
Database
PostgreSQL
PostgreSQL is a durable relational default with strong constraints, transactions, indexing, and a broad managed-hosting ecosystem.
Open sourceOpen SourceSelf-hostable
03
Authentication
Better Auth
Better Auth keeps sessions and account data in the application database while supplying typed integrations and extensible flows.
Open sourceOpen SourceSelf-hostable
04
Styling
Tailwind CSS
Tailwind CSS gives a small product team a constrained styling vocabulary without requiring a separate component runtime.
Open sourceOpen SourceSelf-hostable
05
Deployment
Vercel
Vercel minimizes early deployment work for preview environments and globally delivered web applications.
ProprietaryGenerous Free Tier
Alternatives
Docker Engine — Choose containers when deployment portability matters more than a tightly integrated managed workflow.
06
Error monitoring
Sentry
Sentry turns releases and application exceptions into an actionable product-engineering workflow.
Open sourceGenerous Free TierSelf-hostable

Open-source profile

What you can own.

Five of the six recommended components are source-available under established open-source licenses; Vercel is the managed deployment layer.

Cost profile

Where cost appears.

The core software is free to adopt. Hosting, email, database capacity, and monitoring move to paid usage as the product grows.

Tradeoffs

What this stack asks you to accept.

The framework and hosting platform are closely aligned, which increases platform coupling.
Application-owned authentication gives control but also leaves security operations with the product team.
This stack favors TypeScript breadth over specialized backend languages.

Editorial note

Stack choices are editorial recommendations, not an automatic popularity ranking. Pricing and capabilities can change.

Sources checked

Framework capabilities and deployment modelSep 4, 2026

Authentication architecture and supported database adaptersSep 4, 2026