Cloudflare Workers Next.js SaaS Template - 开源 SaaS 启动模板

本文介绍 Cloudflare Workers Next.js SaaS Template，一个基于 Cloudflare Workers 和 OpenNext 框架的开源 SaaS 启动模板。该项目提供了完整的 SaaS 应用基础设施，包括认证、数据库、邮件服务、支付系统等，帮助开发者快速构建和部署生产级 SaaS 应用。

项目简介

Cloudflare Workers SaaS Template 是一个功能完备的开源 SaaS 模板，由 LubomirGeorgiev 开发维护。截至目前，该项目在 GitHub 上已获得 725+ stars 和 156 forks。它基于 Next.js 15 和 Cloudflare Workers 构建，利用 OpenNext 框架实现边缘计算部署，为开发者提供了一套现代化的 SaaS 开发解决方案。

在线演示: https://nextjs-saas-template.lubomirgeorgiev.com/sign-up

核心特性

认证系统

基于 Lucia Auth 构建的完整认证方案：

• 邮箱/密码注册与登录
• WebAuthn/Passkey 无密码认证
• Google OAuth/SSO 集成
• 忘记密码流程
• 修改密码功能
• 邮箱验证机制
• Cloudflare KV 会话管理
• Turnstile 验证码集成
• 认证端点速率限制
• 受保护路由和布局
• 会话列表与管理
• 反临时邮箱保护

数据库方案

使用 Drizzle ORM 和 Cloudflare D1：

• 类型安全的数据库操作
• 自动迁移生成
• 本地开发使用 SQLite
• 高效数据获取
• 类型安全查询

邮件服务

基于 React Email 和 Resend/Brevo：

• 精美的邮件模板
• 邮件预览模式
• 本地邮件开发服务器
• 事务性邮件
• 邮箱验证流程
• 响应式邮件模板

支付与计费

完整的信用额度计费系统：

• 基于信用额度的定价模型
• 每月信用额度刷新
• 信用使用追踪
• Stripe 支付集成
• 交易历史记录
• 信用包管理
• 按量付费模式
• 使用分析

现代 UI 设计

• Tailwind CSS 样式框架
• Shadcn UI 组件库
• 深色/浅色模式切换
• 响应式设计
• 加载状态和动画
• Toast 通知
• 设置仪表盘
• 落地页模板
• 个人资料设置页
• 表单验证状态

开发者体验

• 本地开发环境配置
• TypeScript 支持
• ESLint 配置
• Prettier 格式化
• 类型安全环境变量
• Cloudflare 类型生成
• Cursor AI 开发支持
• 全面的文档
• 项目结构最佳实践

边缘计算优势

• Cloudflare Workers 全球部署
• 零冷启动时间
• 边缘缓存
• React Server Components
• 服务端渲染
• D1 边缘数据库
• KV 会话存储
• API 速率限制

多租户支持

• 组织管理
• 用户角色和权限
• 租户隔离
• 资源共享控制
• 每租户分析
• 租户特定配置
• 团队协作功能

技术栈

安装指南

前置要求

• Node.js >= 18
• pnpm >= 8（推荐）

本地开发

# 克隆仓库
git clone https://github.com/LubomirGeorgiev/cloudflare-workers-nextjs-saas-template.git
cd cloudflare-workers-nextjs-saas-template

# 安装依赖
pnpm install

# 配置环境变量
cp .dev.vars.example .dev.vars
cp .env.example .env

# 编辑 .dev.vars 和 .env 文件，填入必要的配置

# 创建本地数据库并应用迁移
pnpm db:migrate:dev

# 启动开发服务器
pnpm dev

# 访问 http://localhost:3000

邮件模板开发

# 启动邮件预览服务器
pnpm email:dev

# 访问 http://localhost:3001 预览和编辑邮件模板

生产部署

部署前准备

1. 更新 src/constants.ts 中的项目信息
2. 更新 .cursor/rules/001-main-project-context.mdc 项目规范
3. 更新 src/components/footer.tsx 页脚信息
4. 可选：更新 src/app/globals.css 配色方案
5. 更新 src/app/layout.tsx 元数据

Cloudflare 配置

1. 创建 D1 和 KV 命名空间
2. 设置邮件服务 API Key（Resend 或 Brevo）
3. 创建 Turnstile 验证码
4. 更新 wrangler.jsonc 配置文件

GitHub Actions 配置

1. 生成 Cloudflare API Token（需要 Workers、D1、KV 等权限）
2. 添加 CLOUDFLARE_API_TOKEN 到 GitHub Secrets
3. 添加 CLOUDFLARE_ACCOUNT_ID 到 GitHub Variables
4. 可选：添加 CLOUDFLARE_ZONE_ID 用于 CDN 缓存清除
5. 推送到 main 分支自动部署

项目结构

├── .cursor/              # Cursor AI 配置
├── .github/workflows/    # GitHub Actions
├── public/               # 静态资源
├── scripts/              # 脚本工具
├── src/
│   ├── app/              # Next.js App Router
│   ├── components/       # React 组件
│   ├── constants.ts      # 项目常量
│   ├── db/               # 数据库配置
│   ├── lib/              # 工具函数
│   ├── react-email/      # 邮件模板
│   └── styles/           # 样式文件
├── drizzle.config.ts     # Drizzle 配置
├── next.config.ts        # Next.js 配置
├── open-next.config.ts   # OpenNext 配置
└── wrangler.jsonc        # Cloudflare 配置

计划功能

• ESLint 未使用导入/变量检查
• Tailwind 4 升级
• Meta SEO 标签优化
• 动态 OpenGraph 图片
• sitemap.xml
• robots.txt
• 多语言支持 (i18n)
• 通知系统
• Webhooks

适用场景

• SaaS 产品快速启动
• 需要边缘部署的应用
• 多租户 B2B 平台
• 需要完整认证系统的项目
• 需要支付集成的应用

项目链接

• GitHub 仓库: https://github.com/LubomirGeorgiev/cloudflare-workers-nextjs-saas-template
• 在线演示: https://nextjs-saas-template.lubomirgeorgiev.com/sign-up
• OpenNext 文档: https://opennext.js.org/cloudflare