基于 Next.js 的企业级 SaaS 全栈启动套件，含认证、支付与审计日志

方案简介

Enterprise SaaS Starter Kit 是一个开源的 Next.js SaaS 样板工程，目标是让开发者不用从零搭建企业级 SaaS 应用的通用能力。README 明确写道："Next.js-based SaaS starter kit saves you months of development by starting you off with all the features that are the same in every product, so you can focus on what makes your app unique." 也就是说，它把每个 SaaS 产品都需要的认证、团队管理、支付、Webhook、审计日志等通用功能预先组合好，开发者只需专注业务差异化部分。技术栈上它以 Next.js（React 框架，提供 SSR 与静态生成）为骨架，Tailwind CSS 负责样式，Prisma 作为 ORM 连接 PostgreSQL，TypeScript 保证类型安全，NextAuth.js 处理认证，Stripe 处理支付，并集成 SAML Jackson（SAML SSO 与目录同步）、Svix（Webhook 编排）、Retraced（审计日志）等企业级服务，配合 Playwright 做 E2E 测试、Docker Compose 快速起本地数据库。适合需要快速搭建符合企业客户要求（SSO、审计、合规）的 SaaS 应用的团队。

亮点与能力

• SAML SSO 单点登录与 Directory Sync（由 SAML Jackson 提供）
• 用户认证与授权（NextAuth.js）
• 订阅支付（Stripe）
• Webhook 编排：在用户/团队 CRUD 操作上发出事件（Svix）
• 审计日志：追踪谁在何时做了什么（Retraced）
• 服务端渲染与静态站点生成（Next.js）
• E2E 自动化测试（Playwright，支持 chromium 与 firefox）
• 数据库可视化管理（Prisma Studio）

组成与分工

• Next.js：React 框架，提供 SSR 与静态生成，构建应用界面，主配置在 next.config.js
• React：构建交互式 UI 组件，组件位于 components 目录
• Tailwind CSS：utility-first CSS 框架，负责样式，配置在 postcss.config.js
• Prisma：开源数据库工具包，做 ORM 简化数据库查询，schema 在 prisma 目录
• PostgreSQL：开源对象关系数据库，存储应用数据，连接经 Prisma 管理
• NextAuth.js：Next.js 开源认证方案，处理用户认证授权，配置在 pages/api/auth/[...nextauth].ts
• SAML Jackson：处理 SAML SSO 与目录同步
• Svix：Webhook 编排，CRUD 操作时发出事件
• Retraced：审计日志服务，记录用户活动
• Stripe：支付处理，代码在计费与订阅相关文件
• Playwright：浏览器自动化库，运行 E2E 测试
• Docker：通过 docker-compose.yml 容器化 Postgres 等依赖
• TypeScript：类型安全的 JavaScript 超集，提升代码健壮性

前置要求

• Node.js (Version: >=18.x)
• PostgreSQL
• NPM
• Docker compose

实施步骤

1. Setup

Fork 仓库并克隆：

bash
git clone https://github.com//saas-starter-kit.git

2. 进入项目目录

bash
cd saas-starter-kit

3. 安装依赖

bash
npm install

4. 配置环境变量

复制 .env.example 为 .env：

bash
cp .env.example .env

5. 创建数据库（可选）

项目提供含 Postgres 容器的 docker-compose.yml：

bash
docker-compose up -d

6. 初始化数据库 schema

bash
npx prisma db push

7. 启动开发服务器

bash
npm run dev

8. 启动 Prisma Studio（可选）

bash
npx prisma studio

9. 运行 E2E 测试

安装 Playwright 依赖：

bash
npm run playwright:update

运行测试：

bash
npm run test:e2e

使用与配置要点

• E2E 测试写在 /tests 文件夹内，修改 playwright.config.ts 可调整测试配置
• HTML 测试报告生成在 report 文件夹
• Prisma Studio 可视化编辑数据库数据
• 部署方面支持一键部署到 Vercel、Heroku、DigitalOcean，部署环境变量包括 NEXTAUTH_SECRET、SMTP_HOST、SMTP_PORT、SMTP_USER、SMTP_PASSWORD、SMTP_FROM、DATABASE_URL、APP_URL

注意事项与常见问题

• 创建数据库步骤标注为 Optional，可使用 docker-compose 中的 Postgres 容器简化依赖安装
• E2E 测试目前仅支持 chromium 和 firefox 两个浏览器

优缺点

• ✓ 开箱即用，节省数月开发
• ✓ 集成企业级 SSO 与审计日志
• ✕ 依赖组件较多，上手成本高

出处

本方案挖掘自开源项目 boxyhq/saas-starter-kit，方案内容与实施命令均来自其 README 原文。