React Templates & Themes Logo React Templates & Themes
Vercel Official - SaaS Subscription Boilerplate screenshot

Vercel Official - SaaS Subscription Boilerplate

Author Avatar Theme by Vercel
Updated: 23 Jan 2025
7416 Stars

Clone, deploy, and fully customize a SaaS subscription application with Next.js.

Github Live Preview

Categories

Nextjs Tailwind Supabase Boilerplate Fullstack

Overview

The Next.js Subscription Payments Starter is an all-in-one starter kit designed for high-performance SaaS applications. It is built on top of Next.js, Supabase, and Stripe, providing a secure user management and authentication system, powerful data access and management tooling, integration with Stripe Checkout and the Stripe customer portal, and automatic syncing of pricing plans and subscription statuses via Stripe webhooks.

Features

  • Secure user management and authentication with Supabase
  • Powerful data access and management tooling on top of PostgreSQL with Supabase
  • Integration with Stripe Checkout and the Stripe customer portal
  • Automatic syncing of pricing plans and subscription statuses via Stripe webhooks

Installation

  1. Click on the Vercel Deploy Button to initiate the deployment.
  2. Deploy the project with Vercel, which will create a new repository with the template on your GitHub account and guide you through a new Supabase project creation.
  3. Set your main production URL as the site URL in the Supabase project’s auth > URL configuration.
  4. Add a new Production environment variable in the Vercel deployment settings called NEXT_PUBLIC_SITE_URL and set it to the same URL.
  5. Set up redirect wildcards for deploy previews and configure OAuth providers if needed.
  6. If you haven’t deployed the template via the Deploy Button, navigate to the Supabase API settings and copy the project API keys and URL into the corresponding environment variables in the Vercel deployment interface.
  7. Configure Stripe by creating a webhook, setting up test payments, and creating product and pricing information.
  8. Configure the Stripe customer portal with custom branding and desired settings.
  9. Clone the GitHub repository to your local machine.
  10. Use the Vercel CLI to link your project.
  11. Set up the environment variables locally using the Vercel CLI and the Supabase dashboard.
  12. Install the Stripe CLI and link your Stripe account, then start local webhook forwarding.
  13. Install dependencies and run the Next.js client locally.
  14. To go live, archive testing products, configure production environment variables, and redeploy the project.
  15. Verify that the project is running in production mode and test the Stripe checkout with a test card.

Summary

The Next.js Subscription Payments Starter is a comprehensive starter kit that combines Next.js, Supabase, and Stripe to provide all the necessary tools for building and managing a high-performance SaaS application. With features like secure user management, powerful data access and management capabilities, and seamless integration with Stripe for subscription payments, this starter kit offers a solid foundation for developers to build and scale their SaaS applications. The installation process guides users through setting up the required services and configuring the environment variables, making it easy to get up and running.