Full SaaS starter kit with Stripe for payments and Supabase for auth.
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.
As we will be setting up both dev and prod environments, simply use .env.local
to develop locally and .env
for production environments
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.
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.
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
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
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 appstripeSetup.ts
and change your product informationnpm run stripe:setup
to setup your Stripe productNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
and NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID
to .env
Your pricing table should now be set up
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
/utils/db/schema.ts
npm run db:generate
to generate migration filesnpm run db:migrate
to apply migration
npm run dev# oryarn dev# orpnpm dev# orbun dev
Open http://localhost:3000 with your browser to see the result.
To receive webhook events from Stripe while developing locally, follow these steps:
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.
Start the webhook listener Run the following command to forward Stripe events to your local server:
npm run stripe:listen
This command starts the Stripe CLI in listening mode and forwards incoming webhook events to http://localhost:3000/webhook/stripe
.
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.
Full SaaS starter kit with Stripe for payments and Supabase for auth.
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.
As we will be setting up both dev and prod environments, simply use .env.local
to develop locally and .env
for production environments
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.
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.
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
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
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 appstripeSetup.ts
and change your product informationnpm run stripe:setup
to setup your Stripe productNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
and NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID
to .env
Your pricing table should now be set up
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
/utils/db/schema.ts
npm run db:generate
to generate migration filesnpm run db:migrate
to apply migration
npm run dev# oryarn dev# orpnpm dev# orbun dev
Open http://localhost:3000 with your browser to see the result.
To receive webhook events from Stripe while developing locally, follow these steps:
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.
Start the webhook listener Run the following command to forward Stripe events to your local server:
npm run stripe:listen
This command starts the Stripe CLI in listening mode and forwards incoming webhook events to http://localhost:3000/webhook/stripe
.
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.