saas-starter README

The project's README from github.com/nextjs/saas-starter. As one markdown file: README.md.

Next.js SaaS Starter

This is a starter template for building a SaaS application using Next.js with support for authentication, Stripe integration for payments, and a dashboard for logged-in users.

Demo: https://next-saas-start.vercel.app/

Features

Tech Stack

Getting Started

git clone https://github.com/nextjs/saas-starter
cd saas-starter
pnpm install

Running Locally

Install and log in to your Stripe account:

stripe login

Use the included setup script to create your .env file:

pnpm db:setup

Run the database migrations and seed the database with a default user and team:

pnpm db:migrate
pnpm db:seed

This will create the following user and team:

You can also create new users through the /sign-up route.

Finally, run the Next.js development server:

pnpm dev

Open http://localhost:3000 in your browser to see the app in action.

You can listen for Stripe webhooks locally through their CLI to handle subscription change events:

stripe listen --forward-to localhost:3000/api/stripe/webhook

Testing Payments

To test Stripe payments, use the following test card details:

Going to Production

When you're ready to deploy your SaaS application to production, follow these steps:

Set up a production Stripe webhook

  1. Go to the Stripe Dashboard and create a new webhook for your production environment.
  2. Set the endpoint URL to your production API route (e.g., https://yourdomain.com/api/stripe/webhook).
  3. Select the events you want to listen for (e.g., checkout.session.completed, customer.subscription.updated).

Deploy to Vercel

  1. Push your code to a GitHub repository.
  2. Connect your repository to Vercel and deploy it.
  3. Follow the Vercel deployment process, which will guide you through setting up your project.

Add environment variables

In your Vercel project settings (or during deployment), add all the necessary environment variables. Make sure to update the values for the production environment, including:

  1. BASE_URL: Set this to your production domain.
  2. STRIPE_SECRET_KEY: Use your Stripe secret key for the production environment.
  3. STRIPE_WEBHOOK_SECRET: Use the webhook secret from the production webhook you created in step 1.
  4. POSTGRES_URL: Set this to your production database URL.
  5. AUTH_SECRET: Set this to a random string. openssl rand -base64 32 will generate one.

Other Templates

While this template is intentionally minimal and to be used as a learning resource, there are other paid versions in the community which are more full-featured:

saas-starter (nextjs/saas-starter)

Searching Database…

16.2K ·GitHub
Saas-starter
Что это?Бесплатный шаблон с открытым исходным кодом для создания SaaS-приложения на Next.js, который поддерживается в официальной организации Next.js: аутентификация, оплата через Stripe и дашборд для вошедших пользователей уже подключены и работают.
Это готовый продукт или код, на котором мне нужно строить своё?Это шаблон кода, который вы клонируете и на его основе создаёте свой продукт, а не что-то, что устанавливается одной кнопкой. В README его сознательно называют минималистичным и одновременно учебным ресурсом; если хочется больше функций «из коробки», есть платные версии для сообщества.
Как запустить его у себя локально?Установите и войдите в свой аккаунт Stripe, запустите входящий в комплект скрипт настройки — он создаст файл .env, затем выполните миграции базы данных и наполнение данными — это создаст команду по умолчанию с пользователем [email protected] (пароль admin123). Наконец, запустите dev-сервер Next.js (next dev --turbopack).
Какие аккаунты или сервисы мне нужны, чтобы это запустить?Нужны база данных Postgres и аккаунт Stripe. Стек: Next.js, Postgres, Drizzle ORM, Stripe и shadcn/ui, плюс Stripe CLI, чтобы локально слушать вебхуки.
Его можно запускать как есть, или для продакшена ещё нужно поработать?Он намеренно минималистичный — это фундамент, а не готовый продукт. Запуск в бой — ваша задача: создать боевой вебхук Stripe, развернуть проект на Vercel и самостоятельно задать переменные окружения вроде STRIPESECRETKEY, STRIPEWEBHOOKSECRET, POSTGRESURL и AUTHSECRET.
Мне нужно быть опытным разработчиком на Next.js, чтобы этим пользоваться?Опыт поможет, потому что вы будете расширять кодовую базу на TypeScript/Next.js с Drizzle и Stripe. Но проект прямо позиционируется как учебный ресурс, так что изучать его — совершенно нормальный способ использования.
Что есть уже «из коробки»?Маркетинговая лендинг-страница, страница тарифов, подключённая к Stripe Checkout, страницы дашборда с CRUD для пользователей и команд, базовое разграничение ролей Owner/Member (RBAC), управление подписками через Stripe Customer Portal, вход по email и паролю с JWT в cookies, middleware для защиты маршрутов и система логирования активности.
Как управлять изменениями схемы базы данных?В проекте используется Drizzle с drizzle-kit: db:generate создаёт миграции, db:migrate применяет их, а db:studio открывает графический интерфейс для просмотра данных.
Могу ли я протестировать оплату без настоящей карты?Да. Используйте тестовую карту Stripe 4242 4242 4242 4242 с любой будущей датой истечения срока и любым трёхзначным CVC, а локально слушайте события подписок через Stripe CLI.
What are similar projects?react-starter-kit, open-saas, full-stack-fastapi-template, chatbot, Next-js-Boilerplate, taxonomy, sales-crm, SIAPIN
Which topics is it in?subscriptions, crud, starter-kit, stripe, drizzle-orm, postgres, middleware, shadcn-ui, jwt, boilerplate, full-stack, rbac
Creator
nextjs
Size
0.4 MB
Stars
16.2K
Updated
CommitDec 11
Age
2y
Commits · 90 Days