Skip to content

Get SaaS 是一个功能完整的开源 SaaS 模版,集成了用户认证、支付系统、多语言支持、SEO优化等企业级功能。

Notifications You must be signed in to change notification settings

ItusiAI/get-saas

Repository files navigation

Get SaaS

Get SaaS Logo

🚀 专为出海设计的现代化SaaS模版 | Modern SaaS Template Designed for Global Products

Next.js TypeScript Tailwind CSS PostgreSQL Stripe

🌟 在线演示📚 完整文档🚀 商业版购买


Get SaaS 是一个功能完整的 SaaS 模版,集成了用户认证、支付系统、多语言支持、SEO优化等企业级功能。基于 Next.js 和现代化技术栈构建,让您专注于业务逻辑,快速推向全球市场。

📋 目录 | Table of Contents

🎯 为什么选择 Get SaaS?

  • 开箱即用: 完整的 SaaS 功能,无需从零开始
  • 🌍 全球化支持: 内置多语言和国际化功能
  • 💳 支付就绪: 集成 Stripe 支付系统,支持订阅和一次性付款
  • 🔐 企业级安全: 完整的用户认证和数据保护
  • 📊 后台管理: 内置管理员后台和数据分析
  • 🎨 现代化设计: 响应式 UI 和优秀的用户体验
  • 📈 SEO 优化: 多语言 SEO 和性能优化

✨ 核心功能 | Core Features

🔐 完整的用户认证系统

  • 多种登录方式: 邮箱密码、Google OAuth、GitHub OAuth
  • 安全特性: 邮箱验证、密码重置、会话管理
  • 用户管理: 用户资料、密码修改、账户关联

💳 Stripe 支付系统集成

  • 订阅计费: 支持月度/年度订阅模式
  • 一次性付款: 积分购买系统
  • 支付管理: 客户门户、发票管理、退款处理
  • Webhook 集成: 自动处理支付状态变更

🌍 国际化支持

  • 多语言: 支持中文和英文,可轻松扩展
  • 本地化: 完整的 UI 翻译和日期格式化
  • SEO 优化: 多语言 URL 和元数据

📊 用户仪表板

  • 订阅管理: 查看订阅状态、管理计费
  • 积分系统: 积分购买、使用记录、历史查询
  • 个人资料: 用户信息管理、安全设置

📧 邮件系统

  • 邮件验证: 注册验证、密码重置
  • 通知邮件: 支付成功、订阅变更通知
  • Newsletter: 邮件订阅和退订功能
  • 后台管理: 邮件订阅统计和管理

🎨 现代化 UI/UX

  • 响应式设计: 完美适配桌面和移动设备
  • 暗色主题: 现代化的视觉设计
  • 组件库: 基于 Radix UI 的可复用组件
  • 动画效果: 流畅的交互体验

🛠️ 技术栈 | Tech Stack

前端

  • Next.js 15 - React 全栈框架
  • TypeScript - 类型安全
  • Tailwind CSS - 原子化 CSS 框架
  • Radix UI - 无障碍组件库
  • next-intl - 国际化解决方案
  • React Hook Form - 表单管理
  • Zod - 数据验证

后端

  • Next.js API Routes - 服务端 API
  • NextAuth.js - 身份认证
  • Drizzle ORM - 数据库 ORM
  • PostgreSQL - 关系型数据库
  • Stripe - 支付处理
  • Resend - 邮件服务

部署与工具

  • Vercel - 部署平台
  • Drizzle Kit - 数据库迁移
  • ESLint & Prettier - 代码规范

� 功能预览 | Feature Preview

🏠 首页展示

Homepage

💳 支付系统

Payment

🔐 用户认证

Authentication

�🚀 快速开始 | Quick Start

💡 提示: 查看 完整配置文档 获取详细的设置指南

📋 环境要求

  • Node.js 18+
  • PostgreSQL 数据库
  • Stripe 账户
  • Resend 账户(邮件服务)
  • Google/GitHub OAuth 应用(可选)

1. 克隆项目

git clone <repository-url>
cd get-saas-pro

2. 安装依赖

npm install
#
pnpm install

3. 环境配置

📖 详细配置: 查看 配置文档 获取完整的环境变量配置指南

点击查看完整环境变量配置
# ===========================================
# 数据库配置 | Database Configuration
# ===========================================
DATABASE_URL="postgresql://username:password@localhost:5432/get_saas_pro"

# ===========================================
# NextAuth 配置 | NextAuth Configuration
# ===========================================
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-super-secret-key-here-make-it-long-and-random"

# ===========================================
# 邮件服务配置 | Email Service Configuration
# ===========================================
RESEND_API_KEY="re_xxxxxxxxxxxxxxxxxxxxxxxxxx"
EMAIL_FROM="noreply@yourdomain.com"
EMAIL_FROM_NAME="Get SaaS"

# ===========================================
# Stripe 支付配置 | Stripe Payment Configuration
# ===========================================
STRIPE_SECRET_KEY="sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxx"
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxx"
STRIPE_WEBHOOK_SECRET="whsec_xxxxxxxxxxxxxxxxxxxxxxxxxx"

# Stripe 产品价格 ID | Stripe Product Price IDs
STRIPE_PRO_PRICE_ID="price_xxxxxxxxxxxxxxxxxx"
STRIPE_POINTS_STARTER_PRICE_ID="price_xxxxxxxxxxxxxxxxxx"
STRIPE_POINTS_POPULAR_PRICE_ID="price_xxxxxxxxxxxxxxxxxx"
STRIPE_POINTS_PREMIUM_PRICE_ID="price_xxxxxxxxxxxxxxxxxx"

# ===========================================
# OAuth 第三方登录配置 | OAuth Configuration
# ===========================================
# Google OAuth
GOOGLE_CLIENT_ID="123456789012-abcdefghijklmnopqrstuvwxyz123456.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="GOCSPX-abcdefghijklmnopqrstuvwxyz123456"

# GitHub OAuth
GITHUB_ID="abcdef1234567890abcd"
GITHUB_SECRET="abcdef1234567890abcdef1234567890abcdef12"

# ===========================================
# 应用配置 | Application Configuration
# ===========================================
NEXT_PUBLIC_APP_URL="http://localhost:3000"

4. 数据库设置

# 推送数据库架构(开发环境)
npm run db:push

# 或运行迁移(生产环境推荐)
npm run db:generate
npm run db:migrate

5. 设置管理员权限(可选)

# 通过 API 设置管理员
curl -X POST "http://localhost:3000/api/admin/set-admin" \
  -H "Content-Type: application/json" \
  -d '{"email": "admin@yourdomain.com"}'

6. 启动开发服务器

npm run dev

🎉 访问 http://localhost:3000 查看应用!

7. 访问管理后台(管理员)

  • 邮件订阅管理: http://localhost:3000/zh/admin/newsletter

📁 项目结构 | Project Structure

点击查看详细项目结构
├── app/                    # Next.js App Router
│   ├── [locale]/          # 国际化路由
│   │   ├── admin/         # 管理员后台
│   │   │   └── newsletter/ # 邮件订阅管理
│   │   ├── auth/          # 认证页面
│   │   │   ├── signin/    # 登录页面
│   │   │   ├── signup/    # 注册页面
│   │   │   └── ...        # 其他认证页面
│   │   ├── dashboard/     # 用户仪表板
│   │   ├── profile/       # 用户资料
│   │   ├── blog/          # 博客页面
│   │   └── newsletter/    # 邮件订阅页面
│   └── api/               # API 路由
│       ├── admin/         # 管理员 API
│       ├── auth/          # 认证 API
│       ├── newsletter/    # 邮件订阅 API
│       ├── stripe/        # 支付 API
│       └── user/          # 用户 API
├── components/            # React 组件
│   ├── ui/               # 基础 UI 组件
│   ├── auth/             # 认证组件
│   ├── dashboard/        # 仪表板组件
│   ├── newsletter/       # 邮件订阅组件
│   └── ...
├── docs/                 # 配置文档
│   ├── README.md         # 文档索引
│   ├── database-configuration.md
│   ├── email-configuration.md
│   ├── stripe-configuration.md
│   ├── oauth-configuration.md
│   └── newsletter-management.md
├── lib/                  # 工具库
│   ├── auth.ts           # 认证配置
│   ├── auth-utils.ts     # 认证工具函数
│   ├── db.ts             # 数据库连接
│   ├── schema.ts         # 数据库模式
│   ├── stripe.ts         # Stripe 配置
│   ├── email.ts          # 邮件服务
│   └── ...
├── messages/             # 国际化翻译文件
│   ├── en.json           # 英文翻译
│   └── zh.json           # 中文翻译
├── public/               # 静态资源
└── scripts/              # 脚本目录(可用于自定义测试脚本)

🔧 可用脚本 | Available Scripts

点击查看所有可用脚本
# 开发相关
npm run dev              # 启动开发服务器
npm run build           # 构建生产版本
npm run start           # 启动生产服务器
npm run lint            # 代码检查

# 数据库相关
npm run db:push         # 推送数据库架构(开发环境)
npm run db:generate     # 生成迁移文件
npm run db:migrate      # 运行数据库迁移
npm run db:studio       # 打开数据库管理界面

# 测试相关(需要自行创建测试脚本)
# npm run test:database   # 测试数据库连接
# npm run test:email      # 测试邮件服务
# npm run test:stripe     # 测试 Stripe 配置
# npm run test:oauth      # 测试 OAuth 配置
# npm run test:newsletter # 测试邮件订阅系统
# npm run test:all        # 运行所有测试

🎯 主要页面 | Main Pages

🌐 用户页面

  • 首页 (/) - 产品介绍和功能展示
  • 认证 (/auth/*) - 登录、注册、密码重置、邮箱验证
  • 仪表板 (/dashboard) - 用户管理中心和支付成功页面
  • 个人资料 (/profile) - 用户设置和订阅管理
  • 博客 (/blog/*) - 内容营销页面
  • 邮件订阅 (/newsletter/unsubscribe) - 取消邮件订阅

🛡️ 管理员页面

  • 邮件订阅管理 (/admin/newsletter) - 订阅统计和用户管理

🔗 API 端点

  • 认证 API (/api/auth/*) - NextAuth.js 认证端点
  • 支付 API (/api/stripe/*) - Stripe 支付处理
  • 用户 API (/api/user/*) - 用户数据管理
  • 邮件订阅 API (/api/newsletter/*) - 邮件订阅管理
  • 管理员 API (/api/admin/*) - 管理员功能

💰 商业模式 | Business Model

订阅计划

  • 免费版: 基础功能体验
  • 专业版: $9.99/月,包含完整功能和积分
  • 企业版: 定制化解决方案

积分系统

  • 入门套餐: 5,000 积分 - $8
  • 热门套餐: 10,000 积分 - $15
  • 高级套餐: 100,000 积分 - $150

🔒 安全特性 | Security Features

  • 数据加密: 密码 bcrypt 加密
  • 会话管理: JWT 令牌和安全会话
  • CSRF 保护: 内置 CSRF 防护
  • 输入验证: Zod 数据验证
  • 环境隔离: 敏感配置环境变量管理

📈 SEO 优化 | SEO Optimization

  • 多语言 SEO: 完整的多语言元数据和 URL 结构
  • 结构化数据: JSON-LD 结构化标记
  • 站点地图: 自动生成 sitemap.xml
  • 性能优化: Next.js 内置优化和图片优化
  • Meta 标签: 动态生成页面标题和描述
  • Open Graph: 社交媒体分享优化

🧪 测试和调试

# 注意:测试脚本需要根据您的需求自行创建
# 建议在 scripts/ 目录下创建以下测试文件:

# scripts/test-database.js    # 数据库连接测试
# scripts/test-email.js       # 邮件服务测试
# scripts/test-stripe.js      # 支付系统测试
# scripts/test-oauth.js       # OAuth 登录测试
# scripts/test-newsletter.js  # 邮件订阅测试

# 然后在 package.json 中添加相应的脚本命令

🚀 部署指南 | Deployment Guide

Vercel 部署(推荐)

  1. Fork 本项目到您的 GitHub
  2. Vercel 中导入项目
  3. 配置环境变量
  4. 部署完成!

其他平台

  • Netlify: 支持 Next.js 部署
  • Railway: 一键部署,包含数据库
  • DigitalOcean App Platform: 容器化部署
  • AWS Amplify: AWS 生态系统集成

🤝 贡献 | Contributing

我们欢迎所有形式的贡献!

如何贡献

  1. Fork 本项目
  2. 创建功能分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 创建 Pull Request

贡献指南

  • 遵循现有的代码风格
  • 添加适当的测试
  • 更新相关文档
  • 确保所有测试通过

📄 许可证 | License

本项目采用 MIT 许可证。查看 LICENSE 文件了解详情。

📞 支持与社区 | Support & Community

🆘 获取帮助

📧 联系方式

🌟 社区


🎉 感谢使用 Get SaaS!

如果这个项目对您有帮助,请给我们一个 ⭐ Star!

让我们一起构建更好的 SaaS 产品! 🚀

About

Get SaaS 是一个功能完整的开源 SaaS 模版,集成了用户认证、支付系统、多语言支持、SEO优化等企业级功能。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages