- 难度
- 中等
- 适合
- 入门 / 进阶
- 主要语言
- TypeScript
- GitHub
- ★ 16.0k
- 许可证
- MIT
- 快照日期
- 2026年8月9日
先判断要不要学
这个项目值得拆什么？
Next.js SaaS Starter 是一个有意保持精简的 SaaS 起步项目，将营销页、价格页、邮箱密码登录、团队与角色、活动日志、Stripe 订阅和 Postgres 数据库放在一个 Next.js 仓库里。它适合已经会做页面、正在学如何连成完整 SaaS 链路的学习者。
- 01
登录、授权、数据访问、支付回调和仪表盘均有具体代码入口，可以端到端跟踪。
- 02
以单体 Next.js 应用呈现常见 SaaS 边界，比大型多服务模板更容易建立整体认知。
- 03
README 提供数据库初始化、测试账号、Stripe CLI 回调与生产配置清单。
可以学什么
不只是看代码，而是找到产品的骨架
- 学产品结构
- 学数据库
- 学用户登录
- 学支付
- 学界面
- 学部署
会话与双层路由保护
对照全局 middleware 和局部 Server Action 校验，理解页面可见性与服务端授权为什么需要分开。
middleware.ts · lib/auth/middleware.ts · lib/auth/session.ts · app/(login)/actions.ts支付系统的异步真相
跟踪从价格页到 Checkout，再由 webhook 更新订阅状态的过程，避免把前端跳转误当成支付成功凭据。
app/(dashboard)/pricing/page.tsx · app/api/stripe/checkout/route.ts · app/api/stripe/webhook/route.ts · lib/payments/stripe.ts从 Schema 到产品权限
从 users、teams、teamMembers 和 activityLogs 的关系出发，理解数据模型如何支撑 Owner/Member 角色和审计记录。
lib/db/schema.ts · lib/db/queries.ts · app/(dashboard)/dashboard/activity/page.tsx三段学习路径
从理解、修改到做出你的版本
建立完整 SaaS 功能地图
- 阅读 README 的 Features 和 Tech Stack
- 在 lib/db/schema.ts 标注用户、团队、订阅关系
- 沿定价页追到 checkout 和 webhook 路由
完成标志：能用一张图说清登录用户如何成为付费团队。
本地运行并完成一个可验证的业务修改
- 按 README 初始化数据库并登录测试账号
- 在仪表盘增加一个团队属性
- 通过 Drizzle 迁移和查询展示该字段
- 验证未登录访问仍被拦截
完成标志：完成一次从数据库到受保护页面的端到端改动。
改造成一个细分 SaaS 原型
- 替换营销页、价格和团队核心对象
- 为关键 Server Action 补充 Zod 校验与角色授权
- 使用 Stripe 测试模式跑通 Checkout 与 webhook
- 测试重复 webhook、越权请求和无效输入
完成标志：得到一个拥有可证明数据和权限边界的 SaaS 纵向样片。
评分解释
每一分都要说清楚为什么
为最小模板且有明确初始化命令，但数据库与 Stripe 使复现不是零配置。
README、目录命名与分层一致，主要业务边界容易定位。
对已会 React 的入门者价值高；完全零基础用户会同时遇到认证、SQL 和支付概念。
已包含营销、登录、团队、角色、支付和活动日志的 SaaS 主闭环。
适合以可运行骨架为起点，通过替换领域对象和界面快速做变体。
仓库未归档且有较新推送，但 canary 框架版本增加了更新风险。
SaaS 能力组合典型且实用，但产品模式本身并不新颖。