NextJs SaaS Starter Template

NextJs SaaS Starter Template is a Next.js boilerplate that bundles a landing page, Supabase authentication, Drizzle ORM on Postgres, and Stripe billing into one starter for launching a subscription SaaS app.

What is NextJs SaaS Starter Template?

This is a Next.js SaaS starter kit distributed as source code (the repository shows 237 stars). It takes configuration values supplied through environment files — Supabase URL and anon key, a Postgres connection string, OAuth client credentials, and Stripe keys — and produces a running web app with public marketing pages, a protected dashboard, working sign-up and sign-in flows, and subscription billing. Setup separates development (.env.local) from production (.env).

Key Features

• Framework — Built on Next.js, with setup and deployment guidance pointing to Vercel.
• Authentication — Supabase auth covering full sign up, sign in, logout, forget password, and password reset flows.
• Social login — Pre-wired OAuth with Google and GitHub; only the client ID and secret environment variables need to be added.
• Billing — Stripe Pricing Tables and Stripe Checkout handle plan selection and payment collection.
• Subscription management — Integration with the Stripe Customer Portal lets users edit subscriptions and payment options.
• Plan detection — Stripe webhooks plus an API hook expose the customer's current plan.
• Database — Drizzle ORM on Postgres, with npm run db:migrate to create tables and db:generate to produce new migrations from edits to the schema file.
• Protected routes — Private pages live under /dashboard.
• Styling — Tailwind CSS with shadcn components.

Who is it for?

• Solo developers shipping a subscription product: skip wiring auth and billing manually and start from a working checkout-to-dashboard flow.
• Small teams prototyping a SaaS: stand up sign-in, plan selection, and customer management before building the core product.
• Developers learning SaaS architecture: read a concrete implementation of Supabase OAuth redirects, Drizzle schema migrations, and Stripe webhook handling.

How does it work?

Configuration proceeds in three stages. First you create a Supabase project, add its URL and anon key, and set the site URL and redirect target. Second, you point DATABASE_URL at any Postgres instance and run the migrate script. Third, you configure Stripe: edit stripeSetup.ts, run npm run stripe:setup to create products, build a Pricing Table whose confirmation page points at /subscribe/success, then add the publishable key and pricing table ID. For local webhook testing, npm run stripe:listen forwards Stripe events to /webhook/stripe via the Stripe CLI.

FAQ

What does NextJs SaaS Starter Template include?

It includes a landing page, Supabase authentication with OAuth, forget-password and reset flows, Stripe checkout and pricing tables, a customer portal for subscription edits, protected dashboard routes, Drizzle ORM with Postgres, and Tailwind CSS with shadcn components.

Does it support payments without a verified Stripe account?

Yes during development — Stripe's Test Mode lets you build with test API keys. Access to production mode and a live API key requires verifying your business on Stripe.

Which database can I use?

Any Postgres database works; the documentation gives a Neon-style connection string example and suggests browsing the Vercel Marketplace for first-party services.

How do I test Stripe webhooks locally?

Install the Stripe CLI and run npm run stripe:listen, which forwards incoming events to http://localhost:3000/webhook/stripe on your local server.