следующий стартер Saas

Next.js SaaS-стартер

Это начальный шаблон для создания приложения SaaS с использованием Next.js с поддержкой аутентификации, интеграцией Stripe для платежей и панелью мониторинга для вошедших в систему пользователей.

Демо: https://next-saas-start.vercel.app/

Почему я это сделал?

В 2020 году я прочитал курс «React 2025», в котором показано, как создать SaaS-приложение с помощью Next.js, Stripe и других инструментов.

Что ж, уже почти 2025 год, и React 19 принес столько потрясающих новых функций, которые я даже не ожидал! Этот репозиторий представляет собой демонстрацию последних шаблонов React и Next.js. Эти шаблоны могут значительно упростить некоторые распространенные задачи при создании SaaS, такие как создание форм, взаимодействие с базой данных и многое другое.

Например, в React теперь есть встроенные перехватчики, такие как useActionState для обработки ошибок встроенной формы и состояний ожидания. Действия сервера React могут заменить множество шаблонного кода, необходимого для вызова маршрута API со стороны клиента. И, наконец, хук use React в сочетании с Next.js позволяет невероятно легко создать мощный хук useUser() .

Мы можем получить пользователя из нашей базы данных Postgres в корневом макете, но не дожидаемся Promise . Вместо этого мы пересылаем Promise поставщику контекста React, где мы можем «развернуть» его и ожидать потоковых данных. Это означает, что мы можем получить лучшее из обоих миров: простой код для извлечения данных из нашей базы данных (например, getUser() ) и перехватчик React, который мы можем использовать в клиентских компонентах (например, useUser() ).

Интересный факт: большая часть пользовательского интерфейса этого приложения была создана с использованием v0? Более подробную информацию можно найти здесь, если вы хотите узнать об этом репо.

Функции

• Маркетинговая целевая страница ( / ) с анимированным элементом терминала
• Страница цен ( /pricing ), которая подключается к Stripe Checkout.
• Страницы информационной панели с операциями CRUD для пользователей/команд.
• Базовый RBAC с ролями владельца и участника.
• Управление подпиской с помощью клиентского портала Stripe
• Аутентификация по электронной почте/паролю с помощью JWT, хранящихся в файлах cookie.
• Глобальное промежуточное программное обеспечение для защиты маршрутов входа в систему
• Локальное промежуточное программное обеспечение для защиты действий сервера или проверки схем Zod.
• Система регистрации активности любых пользовательских событий

Технический стек

• Фреймворк : Next.js.
• База данных : Постгрес.
• ОРМ : Морось
• Платежи : Полоса
• Библиотека пользовательского интерфейса : shadcn/ui

Начиная

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

Запуск локально

Используйте прилагаемый сценарий установки для создания файла .env :

pnpm db:setup

Затем запустите миграцию базы данных и заполните базу данных пользователем и командой по умолчанию:

pnpm db:migrate
pnpm db:seed

Это создаст следующего пользователя и команду:

• Пользователь: [email protected]
• Пароль: admin123

Конечно, вы также можете создавать новых пользователей через /sign-up .

Наконец, запустите сервер разработки Next.js:

pnpm dev

Откройте http://localhost:3000 в своем браузере, чтобы увидеть приложение в действии.

При желании вы можете прослушивать веб-перехватчики Stripe локально через интерфейс командной строки для обработки событий изменения подписки:

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

Тестирование платежей

Чтобы протестировать платежи Stripe, используйте следующие данные тестовой карты:

• Номер карты: 4242 4242 4242 4242
• Срок действия: Любая будущая дата
• CVC: любой трехзначный номер.

Переходим к производству

Когда вы будете готовы развернуть свое SaaS-приложение в рабочей среде, выполните следующие действия:

Настройка рабочего веб-перехватчика Stripe

1. Перейдите на панель инструментов Stripe и создайте новый вебхук для своей производственной среды.
2. Установите URL-адрес конечной точки для вашего производственного маршрута API (например, https://yourdomain.com/api/stripe/webhook ).
3. Выберите события, которые вы хотите прослушивать (например, checkout.session.completed , customer.subscription.updated ).

Развертывание в Верселе

1. Отправьте свой код в репозиторий GitHub.
2. Подключите свой репозиторий к Vercel и разверните его.
3. Следуйте инструкциям по развертыванию Vercel, которые помогут вам настроить проект.

Добавьте переменные среды

В настройках проекта Vercel (или во время развертывания) добавьте все необходимые переменные среды. Обязательно обновите значения для производственной среды, в том числе:

1. BASE_URL : установите это для своего производственного домена.
2. STRIPE_SECRET_KEY : используйте секретный ключ Stripe для производственной среды.
3. STRIPE_WEBHOOK_SECRET : используйте секрет веб-перехватчика из производственного веб-перехватчика, созданного на шаге 1.
4. POSTGRES_URL : установите URL-адрес вашей производственной базы данных.
5. AUTH_SECRET : установите случайную строку. openssl rand -base64 32 сгенерирует его.

Другие шаблоны

Хотя этот шаблон намеренно минимален и предназначен для использования в качестве учебного ресурса, в сообществе есть и другие платные версии, которые более полнофункциональны:

• https://achromatic.dev
• https://shipfa.st
• https://makerkit.dev