NextJs SaaS Starter Template

This is the ultimate Next.js SAAS starter kit that includes a landing page, integrations with Supabase auth(Oauth, forget password, etc), PostgresDB with DrizzleORM and Stripe to collect payments, setup subscriptions and allow users to edit subscriptions/payment options.

• Full sign up/ sign in/ logout/ forget password/ password reset flow
• Oauth with Google and Github
• Utilize Stripe Pricing Table and Stripe Checkout to setup customer billing
• Integration with Stripe Customer Portal to allow users to manage billing settings
• Protected routes under /dashboard
• Drizzle ORM/Postgres integration
• Tailwind CSS/shadcn
• Stripe webhooks/ API hook to get customer current plan

Getting Started

As we will be setting up both dev and prod environments, simply use .env.local to develop locally and .env for production environments

Setup Supabase

1. Create a new project on Supabase
2. ADD SUPABASE_URL and SUPABASE_ANON_KEY to your .env file

4. Add NEXT_PUBLIC_WEBSITE_URL to let Supabase know where to redirect the user after the Oauth flow(if using oauth).

You can easily set up social auth with this template. First navigate to google cloud and create a new project. All code is written. You just need to add the GOOGLE_OAUTH_CLIENT_ID and GOOGLE_OAUTH_CLIENT_SECRET to your .env file.

1. Follow these instructions to set up Google OAuth.

You can easily set up social auth with this template. First navigate to google cloud and create a new project. All code is written. You just need to add the GITHUB_OAUTH_CLIENT_ID and GITHUB_OAUTH_CLIENT_SECRET to your .env file.

1. Follow these instructions to set up Github OAuth.

Setup Postgres DB

You can use any Postgres db with this boilerplate code. Feel free to use Vercel's Marketplace to browse through a collection of first-party services to add to your Vercel project.

Add DATABASE_URL to .env file e.g postgresql://${USER}:${PASSWORD}@xxxx.us-east-2.aws.neon.tech/saas-template?sslmode=require

Setup OAuth with Social Providers

1. Go to Supabase dashboard
2. Go to Authentication > Url Configuration
3. Place production url into "Site URL".

Setup Stripe

In order to collect payments and setup subscriptions for your users, we will be making use of Stripe Checkout and Stripe Pricing Tables and Stripe Webhooks

1. Register for Stripe
2. get your STRIPE_SECRET_KEY key and add it to .env. Stripe has both a Test and Production API key. Once you verify your business on Stripe, you will be able to get access to production mode in Stripe which would come with a production API key. But until then, we can use Stripe's Test Mode to build our app

1. Open up stripeSetup.ts and change your product information
2. run npm run stripe:setup to setup your Stripe product
3. Create a new Pricing Table and add your newly created products
4. When creating your new Pricing Table, set the Confirmation Page to Don't show confirmation page. Add YOUR_PUBLIC_URL/subscribe/success as the value(use http://localhost:3000/subscribe/success for local development). This will redirect the user to your main dashboard when they have completed their checkout. For prod, this will be your public url

1. Add NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY and NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID to .env

Your pricing table should now be set up

Setup Database

This boilerplate uses Drizzle ORM to interact with a PostgresDb.

Before we start, please ensure that you have DATABASE_URL set.

To create the necessary tables to start, run npm run db:migrate

1. navigate to /utils/db/schema.ts
2. Edit/add a table
3. run npm run db:generate to generate migration files
4. run npm run db:migrate to apply migration

1
npm run dev
2
# or
3
yarn dev
4
# or
5
pnpm dev
6
# or
7
bun dev

Open http://localhost:3000 with your browser to see the result.

Setup Stripe for Local Development

To receive webhook events from Stripe while developing locally, follow these steps:

1. Install the Stripe CLI Download and install the Stripe CLI if you haven’t already. This tool allows your local server to receive webhook events from Stripe.

2. Start the webhook listener Run the following command to forward Stripe events to your local server:

1
npm run stripe:listen

This command starts the Stripe CLI in listening mode and forwards incoming webhook events to http://localhost:3000/webhook/stripe.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.