站点图标 高效码农

震惊！30分钟搭建付费SaaS？DemoSaaS模板全攻略

高效码农

用 DemoSaaS 在 30 分钟内搭好一个能收钱的 SaaS 雏形

——写给想把想法快速落地的产品经理、独立开发者与计算机专业学生

“

如果你手上有一个 SaaS 点子，却常常被「用户注册、付费订阅、积分、邮件、国际化」这些琐碎功能卡住，这篇文章是一份可落地的操作手册。只要把 DemoSaaS 模板克隆下来、填好配置、跑通脚本，就能在本地得到一个功能完整的线上级雏形，剩下的时间专注于业务本身。

文章目录

  1. 为什么选 DemoSaaS 而不是从零写
  2. 开箱即用的 8 大功能拆解
  3. 环境准备：Node、数据库、Stripe、Resend 一次配齐
  4. 5 步跑通本地开发
  5. 常见场景示例
    • 场景 A：免费用户注册并送 100 积分
    • 场景 B：用户升级到 Pro 订阅
    • 场景 C：中文用户自动切到中文页面
  6. 把本地版本部署到 Vercel 的全过程
  7. 代码结构速览：想改哪里就改哪里
  8. 测试清单：上线前 10 分钟跑一遍
  9. 下一步：从模板到正式产品要改的三件事
  10. 小结与延伸阅读

1. 为什么选 DemoSaaS 而不是从零写

功能点 自己写耗时 DemoSaaS 状态
邮箱注册 + 验证 2–3 天 已集成，配置 2 个变量即可用
Stripe 订阅 + Webhook 1 周 已集成，复制价格 ID 即可
积分充值、扣减、历史 3–4 天 已集成，含中英文邮件模板
响应式 + 暗夜主题 2–3 天 Tailwind + Radix UI 已配好
国际化（i18n） 1–2 天 Next.js 15 原生方案，字典文件已写

把省下来的时间用来打磨你的核心算法或客户访谈，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 一次配齐

依赖 最低版本 快速获得途径
Node.js 18.17 nodejs.org 下载 LTS
PostgreSQL 12 Supabase 免费数据库 500 MB
Stripe 账户 任意 stripe.com 注册即用测试环境
Resend 账户 任意 resend.com 注册后送 100 封/天

把以下空位一次性填完，后面基本不用改：

# 数据库
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 步跑通本地开发

  1. 克隆

    git clone <仓库地址>
cd demosaas

  2. 安装

    npm install

  3. 环境变量

    cp .env.example .env.local
# 用自己喜欢的编辑器把 .env.local 填完

  4. 数据库

    npm run db:generate   # 生成迁移
npm run db:migrate    # 写入表结构

  5. 启动

    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 的全过程

  1. 用 GitHub 账号登录 vercel.com，Import 仓库。
  2. Framework Preset 选 Next.js，Root Directory 默认。
  3. Environment Variables 页面一次性粘贴 .env.local 的所有键值。
  4. Deploy。约 2 分钟后拿到 https://yourproject.vercel.app。
  5. 绑定自定义域名（可选）：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 分钟跑一遍

测试项 步骤 通过标志
注册 用新邮箱注册 收到验证邮件
验证 点邮件链接 Dashboard 显示 150 积分
购买积分 选 1000 积分包，走 Stripe 测试卡 4242 4242 4242 4242 余额 +1000
升级订阅 选 Pro 方案，支付 Dashboard 显示 Pro
语言切换 浏览器切英文 页面自动跳转 /en/
暗夜模式 点右上角月亮图标 全局切换暗色

一行命令快速验证：

npm run validate:env
npm run test:stripe
npm run test:i18n
npm run test:email-config

全部绿色即可上线。

9. 下一步：从模板到正式产品要改的三件事

  1. 业务逻辑
    把积分的“获取 / 消费”规则换成你的核心功能，例如 API 调用次数、图片处理点数等。只需改 lib/points.ts 与前端两个页面。

  2. 品牌视觉
    在 public/ 替换 Logo，在 tailwind.config.ts 改主色与字体，30 分钟即可拥有独立 UI。

  3. 合规与安全

    • 替换 Cookie 弹窗文案，符合 GDPR。
    • 生产环境 Stripe 开启「Stripe Tax」自动算税。
    • 把 NEXTAUTH_SECRET 与 JWT_SECRET 换成 256 位随机串并存在 Vercel「Environment Variables」加密区。

10. 小结与延伸阅读

DemoSaaS 的价值在于「省掉通用功能的开发时间」，让你把精力投入到真正差异化的业务逻辑。读完本文，你应当已经能够：

  • 在本地跑通包含支付、邮件、国际化、积分系统的完整 SaaS；
  • 了解每个功能的入口文件，知道从哪里改；
  • 在 Vercel 上一键上线并绑定域名。

下一步推荐阅读：

祝你把点子变成第一个付费用户！

部署成功庆祝图

退出移动版