技术栈
AI 工具
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 触发重查）。
评论 0
0 条评论还没有评论，来说第一句。