---
title: "Next.js SaaS Starter "
description: "Postgres, Auth, Tailwind, shadcn/ui, and more."
url: "https://vercel.com/templates/next.js/next-js-saas-starter"
links:
  repository: "https://github.com/nextjs/saas-starter"
  demo: "https://next-saas-start.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Next.js+SaaS+Starter&demo-description=Postgres%2C+Auth%2C+Tailwind%2C+shadcn%2Fui%2C+and+more.&demo-url=https%3A%2F%2Fnext-saas-start.vercel.app%2F&project-name=Next.js+SaaS+Starter&repository-name=next-js-saas-starter&repository-url=https%3A%2F%2Fgithub.com%2Fnextjs%2Fsaas-starter&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F6PBInBOGbasdambvsTaCeI%2Fad460edfd8544b2f390b47893c341ddf%2FCleanShot_2024-09-16_at_17.14.33_2x.png&env=AUTH_SECRET%2CSTRIPE_SECRET_KEY%2CSTRIPE_WEBHOOK_SECRET%2CBASE_URL&envDescription=Instructions+on+how+to+get+these+env+vars%3A&envLink=https%3A%2F%2Fgithub.com%2Fnextjs%2Fsaas-starter&from=templates&products=%5B%7B%22type%22%3A%22integration%22%2C%22group%22%3A%22postgres%22%7D%5D"
---

# Next.js SaaS Starter 

Postgres, Auth, Tailwind, shadcn/ui, and more.

# Next.js SaaS Starter

This is a starter template for building a SaaS application using **Next.js** with support for authentication, Stripe integration for payments, and a dashboard for logged-in users.

**Demo: [https://next-saas-start.vercel.app/](https://next-saas-start.vercel.app/)**

## Features

- Marketing landing page (`/`) with animated Terminal element
- Pricing page (`/pricing`) which connects to Stripe Checkout
- Dashboard pages with CRUD operations on users/teams
- Basic RBAC with Owner and Member roles
- Subscription management with Stripe Customer Portal
- Email/password authentication with JWTs stored to cookies
- Global middleware to protect logged-in routes
- Local middleware to protect Server Actions or validate Zod schemas
- Activity logging system for any user events

## Tech Stack

- **Framework**: [Next.js](https://nextjs.org/)
- **Database**: [Postgres](https://www.postgresql.org/)
- **ORM**: [Drizzle](https://orm.drizzle.team/)
- **Payments**: [Stripe](https://stripe.com/)
- **UI Library**: [shadcn/ui](https://ui.shadcn.com/)

## Getting Started

```bash
git clone https://github.com/nextjs/saas-starter
cd saas-starter
pnpm install
```

## Running Locally

[Install](https://docs.stripe.com/stripe-cli) and log in to your Stripe account:

```bash
stripe login
```

Use the included setup script to create your `.env` file:

```bash
pnpm db:setup
```

Run the database migrations and seed the database with a default user and team:

```bash
pnpm db:migrate
pnpm db:seed
```

This will create the following user and team:

- User: `test@test.com`
- Password: `admin123`

You can also create new users through the `/sign-up` route.

Finally, run the Next.js development server:

```bash
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser to see the app in action.

You can listen for Stripe webhooks locally through their CLI to handle subscription change events:

```bash
stripe listen --forward-to localhost:3000/api/stripe/webhook
```

## Testing Payments

To test Stripe payments, use the following test card details:

- Card Number: `4242 4242 4242 4242`
- Expiration: Any future date
- CVC: Any 3-digit number

## Going to Production

When you're ready to deploy your SaaS application to production, follow these steps:

### Set up a production Stripe webhook

1. Go to the Stripe Dashboard and create a new webhook for your production environment.
2. Set the endpoint URL to your production API route (e.g., `https://yourdomain.com/api/stripe/webhook`).
3. Select the events you want to listen for (e.g., `checkout.session.completed`, `customer.subscription.updated`).

### Deploy to Vercel

1. Push your code to a GitHub repository.
2. Connect your repository to [Vercel](https://vercel.com/) and deploy it.
3. Follow the Vercel deployment process, which will guide you through setting up your project.

### Add environment variables

In your Vercel project settings (or during deployment), add all the necessary environment variables. Make sure to update the values for the production environment, including:

1. `BASE_URL`: Set this to your production domain.
2. `STRIPE_SECRET_KEY`: Use your Stripe secret key for the production environment.
3. `STRIPE_WEBHOOK_SECRET`: Use the webhook secret from the production webhook you created in step 1.
4. `POSTGRES_URL`: Set this to your production database URL.
5. `AUTH_SECRET`: Set this to a random string. `openssl rand -base64 32` will generate one.

## Other Templates

While this template is intentionally minimal and to be used as a learning resource, there are other paid versions in the community which are more full-featured:

- https://achromatic.dev
- https://shipfa.st
- https://makerkit.dev
- https://zerotoshipped.com
- https://turbostarter.dev

## Related Templates

### [Nextra: Docs Starter Kit](https://vercel.com/templates/next.js/documentation-starter-kit)

Simple, powerful and flexible markdown-powered docs site. Built with Next.js.

### [Blog Starter Kit](https://vercel.com/templates/next.js/blog-starter-kit)

A statically generated blog example using Next.js and Markdown.

### [Blog (with comments)](https://vercel.com/templates/next.js/blog-with-comments)

Next.js blog application with Auth0 and Upstash

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.