Skip to content

nhost/nextjs-stripe-starter

Repository files navigation

Next.js Stripe SaaS Starter

The ultimate starter kit for high-performance SaaS applications.

Features

Features

  • Postgres Database
  • GraphQL API
  • Magic Link and GitHub Authentication
  • Email Templates
  • Remote Stripe GraphQL API
  • Next.js
  • TypeScript
  • Tailwind CSS
  • GraphQL Codegen with React Query

Demo

Screenshot of demo

Development Setup

Nhost

  • Clone this repo.
  • Copy .env.local.example to .env.development.
  • Add the following environment variables from Stripe to the .env.development file:
    • NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
    • STRIPE_SECRET_KEY

Stripe (test mode)

  • Create 4 products in the Stripe Dashboard.
  • Add the products to the nhost/seeds/default/001-plans.sql file. The first time you're starting the Nhost project using nhost up the seed script will run and add the data to your plans table.

Stripe Webhooks (test mode)

  • Make sure you have the Stripe CLI installed.
  • Run pnpm stripe:listen.
  • You'll see an output stating the Webhook signing secret starting with whsec_.
  • Copy the Webhook signing secret to your .env.development for STRIPE_WEBHOOK_SECRET.

Frontend and Backend

  • Start the backend with nhost up.
  • Start the frontend with pnpm dev.

You now have a fully working backend and frontend with Next.js, Nhost, and Stripe.

Go Live

Nhost

  • Add the following environment variables from Stripe (using live mode):
    • STRIPE_SECRET_KEY
    • STRIPE_WEBHOOK_SECRET
  • Connect your Nhost project to your Git repository.
    • This will create the tables automatically for you.

Stripe (live mode)

  • Create 4 products in the Stripe Dashboard (live mode).
  • Add the products to the plans Plans database in the Nhost Dashboard.

Stripe Webhooks (live mode)

  • Add a webhook endpoint in Stripe pointing to https://{subdomain}.functions.{region}.nhost.run/v1/webhook/stripe.
  • Configure the events you want to listen to. It's OK to listen to all events.
  • Copy the "Signing secret" and add it as an environment variable in Nhost with the name STRIPE_WEBHOOK_SECRET.

Frontend Hosting

You can use any frontend hosting, like Vercel and Netlify. The process is the same:

  • Connect the repo with a new project in the frontend hosting service.
  • Add the following:
    • NEXT_PUBLIC_NHOST_SUBDOMAIN (from Nhost)
    • NEXT_PUBLIC_NHOST_REGION (from Nhost)
    • NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY (from Stripe)
  • Retrigger a deployment so the newly added environment variables are applied.