用 DemoSaaS 在 30 分钟内搭好一个能收钱的 SaaS 雏形
——写给想把想法快速落地的产品经理、独立开发者与计算机专业学生
“
如果你手上有一个 SaaS 点子，却常常被「用户注册、付费订阅、积分、邮件、国际化」这些琐碎功能卡住，这篇文章是一份可落地的操作手册。只要把 DemoSaaS 模板克隆下来、填好配置、跑通脚本，就能在本地得到一个功能完整的线上级雏形，剩下的时间专注于业务本身。
文章目录
-
为什么选 DemoSaaS 而不是从零写 -
开箱即用的 8 大功能拆解 -
环境准备：Node、数据库、Stripe、Resend 一次配齐 -
5 步跑通本地开发 -
常见场景示例 -
场景 A：免费用户注册并送 100 积分 -
场景 B：用户升级到 Pro 订阅 -
场景 C：中文用户自动切到中文页面
-
-
把本地版本部署到 Vercel 的全过程 -
代码结构速览：想改哪里就改哪里 -
测试清单：上线前 10 分钟跑一遍 -
下一步：从模板到正式产品要改的三件事 -
小结与延伸阅读
1. 为什么选 DemoSaaS 而不是从零写
把省下来的时间用来打磨你的核心算法或客户访谈，ROI 更高。
2. 开箱即用的 8 大功能拆解
2.1 用户认证
-
注册时即送 100 积分；邮箱验证后再送 50 积分。 -
密码重置流程自动发邮件，邮件模板支持中文 / 英文。
2.2 订阅管理
-
免费版 / Pro / Enterprise 三档，后台在 Stripe Dashboard 一键改价。 -
用户在「Billing Portal」可自助开票、取消订阅、更新信用卡。
2.3 积分系统
-
积分包：1000 / 5000 / 10000 三档，对应 Stripe 价格 ID 填到环境变量即可。 -
积分流水写入 PostgreSQL，前端自带历史记录页。
2.4 国际化
-
路由区分 /zh//en/，搜索引擎可收录两套结果。 -
浏览器语言自动跳转，用户也可手动切换。
2.5 邮件服务
-
基于 Resend，开发环境用测试域名即可发信；生产环境再验证自有域名。
2.6 现代化 UI
-
Tailwind CSS 变量化主题；Radix UI 提供无障碍组件。 -
亮色 / 暗色模式跟随系统，也能手动切换。
2.7 类型安全
-
全栈 TypeScript；数据库层用 Drizzle ORM 带类型推导。
2.8 数据库
-
PostgreSQL 为主；Drizzle 自动生成迁移文件，不手写 SQL。
3. 环境准备：Node、数据库、Stripe、Resend 一次配齐
把以下空位一次性填完，后面基本不用改：
# 数据库
DATABASE_URL="postgresql://user:pwd@host:5432/demosaas"
# NextAuth
NEXTAUTH_SECRET="openssl rand -base64 32 生成的随机串"
NEXTAUTH_URL="http://localhost:3000"
# JWT
JWT_SECRET="再生成一个随机串"
# 邮件
RESEND_API_KEY="re_你的key"
RESEND_FROM_EMAIL="noreply@yourdomain.com"
# Stripe
STRIPE_SECRET_KEY="sk_test_..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."
# 价格ID
STRIPE_PRO_PRICE_ID="price_..."
STRIPE_ENTERPRISE_PRICE_ID="price_..."
STRIPE_PRICE_1000_POINTS="price_..."
STRIPE_PRICE_5000_POINTS="price_..."
STRIPE_PRICE_10000_POINTS="price_..."
4. 5 步跑通本地开发
-
克隆
git clone <仓库地址> cd demosaas -
安装
npm install -
环境变量
cp .env.example .env.local # 用自己喜欢的编辑器把 .env.local 填完 -
数据库
npm run db:generate # 生成迁移 npm run db:migrate # 写入表结构 -
启动
npm run dev浏览器打开 http://localhost:3000，看到欢迎页即成功。
5. 常见场景示例
场景 A：免费用户注册并送 100 积分
-
用户访问首页 → 点击 Sign Up → 填写邮箱、密码 → 收到验证邮件 → 点击链接 → 账户激活，余额显示 150 积分（注册 100 + 验证 50）。 -
相关代码： lib/points.ts中的awardPoints函数，规则直接改 SQL 即可。
场景 B：用户升级到 Pro 订阅
-
用户登录 → Pricing 页选择 Pro → 跳转 Stripe Checkout → 支付成功 → 返回 Dashboard 看到「当前方案：Pro」。 -
Webhook 监听 checkout.session.completed，自动把角色写进users.subscription_status。
场景 C：中文用户自动切到中文页面
-
浏览器 Accept-Language: zh-CN→ 首次访问/→ 301 到/zh/→ 所有文案显示中文。 -
切换语言按钮存在 Cookie 中，下次打开记住选择。
6. 把本地版本部署到 Vercel 的全过程
-
用 GitHub 账号登录 vercel.com，Import 仓库。 -
Framework Preset 选 Next.js，Root Directory 默认。 -
Environment Variables 页面一次性粘贴 .env.local的所有键值。 -
Deploy。约 2 分钟后拿到 https://yourproject.vercel.app。 -
绑定自定义域名（可选）：Vercel Dashboard → Domains → Add。DNS 加一条 CNAME 即可。
7. 代码结构速览：想改哪里就改哪里
demosaas/
├── app/
│ ├── [locale]/ # zh 或 en
│ │ ├── page.tsx # 首页
│ │ ├── pricing/ # 价格页
│ │ └── profile/ # 用户中心
│ ├── api/stripe/webhook.ts # 支付回调
│ └── globals.css # 全局样式
├── components/ui/ # 原子组件
├── lib/
│ ├── auth.ts # NextAuth 配置
│ ├── stripe.ts # Stripe SDK 实例
│ └── points.ts # 积分逻辑
├── dictionaries/ # 中英文字典
└── drizzle/ # 数据库迁移文件
-
换颜色：打开 tailwind.config.ts改colors.brand。 -
改文案：在 dictionaries/zh.json搜关键词即可。 -
加字段：改 drizzle/schema.ts→npm run db:generate && npm run db:migrate。
8. 测试清单：上线前 10 分钟跑一遍
一行命令快速验证：
npm run validate:env
npm run test:stripe
npm run test:i18n
npm run test:email-config
全部绿色即可上线。
9. 下一步：从模板到正式产品要改的三件事
-
业务逻辑
把积分的“获取 / 消费”规则换成你的核心功能，例如 API 调用次数、图片处理点数等。只需改lib/points.ts与前端两个页面。 -
品牌视觉
在public/替换 Logo，在tailwind.config.ts改主色与字体，30 分钟即可拥有独立 UI。 -
合规与安全
-
替换 Cookie 弹窗文案，符合 GDPR。 -
生产环境 Stripe 开启「Stripe Tax」自动算税。 -
把 NEXTAUTH_SECRET与JWT_SECRET换成 256 位随机串并存在 Vercel「Environment Variables」加密区。
-
10. 小结与延伸阅读
DemoSaaS 的价值在于「省掉通用功能的开发时间」，让你把精力投入到真正差异化的业务逻辑。读完本文，你应当已经能够：
-
在本地跑通包含支付、邮件、国际化、积分系统的完整 SaaS； -
了解每个功能的入口文件，知道从哪里改； -
在 Vercel 上一键上线并绑定域名。
下一步推荐阅读：
祝你把点子变成第一个付费用户！
