SaaS Template

基于 Next.js 16 + React 19 的 SaaS 起步模板，内置认证、订阅计费、数据库、国际化、测试和监控，开箱即用，可快速启动一个 SaaS 产品。

功能特性

• 🔒 认证：Better Auth —— 注册 / 登录 / 登出、社交登录、忘记密码、无密码登录
• 💳 订阅计费：与支付提供商解耦的计费抽象，通过 PAYMENT_PROVIDER 在 Clink / Creem / Stripe / Waffo 之间切换 —— 一次性支付与周期性订阅、Webhook、退款、争议处理
• 📦 数据库：Drizzle ORM + PostgreSQL（本地 PGlite、线上 Neon）
• 🌐 国际化：next-intl（英语 / 法语）
• 🎨 UI：Tailwind CSS v4 + Shadcn UI
• 🚨 错误监控：Sentry（本地 Spotlight）
• 📝 日志：LogTape + Better Stack
• 🦺 测试：Vitest（单元 + 浏览器模式）、Playwright（E2E）、Storybook
• ♻️ 类型安全环境变量：T3 Env
• ✅ 代码质量：ESLint + Prettier + Commitlint + Commitizen + Lefthook
• 🚀 CI/CD：GitHub Actions、Semantic Release 自动发版、Chromatic 视觉回归

技术栈

类别	技术
框架	Next.js 16（App Router）
UI 库	React 19
语言	TypeScript
样式	Tailwind CSS v4 + Shadcn UI
认证	Better Auth
数据库	Drizzle ORM + PostgreSQL
计费	Clink / Creem / Stripe / Waffo（PAYMENT_PROVIDER 切换）
国际化	next-intl
测试	Vitest + Playwright + Storybook
监控	Sentry + Better Stack + Checkly
包管理	pnpm

订阅计费（Clink / Creem / Stripe / Waffo）

项目内置了一套与支付提供商解耦的计费抽象，通过 PAYMENT_PROVIDER 环境变量在 Clink、Creem、Stripe、Waffo 之间切换。

免费试用与订阅等级

• 免费试用次数限制：。
• 订阅等级头像标识：订阅用户在头像（彩色圆环 + 角标图标）和下拉菜单（彩色等级 pill + 姓名颜色）上与免费用户区分；三个付费等级 pro / ultimate / max 分别用蓝 / 金 / 紫金配色。样式集中配置在 src/config/PlanBadge.ts。
• 重复订阅守卫：用户已有活跃订阅时再点升级，会弹出提示而非重复开单。

登录/注册防机器人（Cloudflare Turnstile）

配置 NEXT_PUBLIC_TURNSTILE_SITE_KEY 和 TURNSTILE_SECRET_KEY 后，登录和注册页都会显示可见的 Turnstile 验证框，提交前必须通过，否则前端拦截。后端 sendMagicLink 仍只对新邮箱强制校验（已存在用户跳过服务端校验），token 无效则直接拒绝、不发邮件。两个变量都未配置时完全跳过，不影响本地开发。

支付新标签页打开

点「升级」会在新标签页打开收银台，原页面停留原地，表单输入不丢失。支付完成切回原标签页时，订阅等级与试用状态会自动刷新（window.focus 触发重查）。

现在已经上线，您可以试用，都是测试环境，别怕扣款，测试银行卡：4242 4242 4242 4242 42