Raphael Starter Kit
这是一个面向编程小白的现代化启动套件，基于 Next.js、Supabase 和 Creem.io 构建。专为帮助开发者快速搭建支持全球用户登录和支付的网站，特别对中国大陆开发者友好。
🌟 简介
这是一个基于 Next.js、Supabase 和 Creem.io 构建的现代化、生产就绪的启动套件。非常适合快速构建具有身份验证、订阅和积分系统的 SaaS 应用程序，让您的 MVP 开发速度提升10倍。
核心特色功能
- 💯 精美的用户界面
- 经过精心设计的现代化界面
- 优雅的响应式设计，在各种设备上呈现完美体验
- 平滑的动画和过渡效果
- 精心优化的布局和组件排列
-
专业的色彩方案和排版
-
🚀 Next.js App Router
- 使用最新的 Next.js 功能
- 服务器组件和客户端组件的最佳组合
- 内置的路由保护
-
快速的页面加载和导航体验
-
🔐 全面的身份验证系统
- 基于 Supabase
- 电子邮件/密码认证
- OAuth 提供商支持 (Google, GitHub等)
- 安全的会话管理
-
使用中间件保护路由
-
💳 完整的支付与订阅系统
- 与 Creem.io 完美集成，支持全球信用卡收款
- 特别适合中国大陆用户作为商家使用
- 多级订阅方案
- 灵活的积分系统
-
详细的使用量跟踪
-
🛠️ 开发者友好
- TypeScript 类型安全
- 清晰的项目结构
- 完善的文档
- Cursor编辑器友好框架
📱 响应式设计
Raphael Starter Kit 采用了全面的响应式设计，确保您的应用在任何设备上都能完美呈现：
- 手机端优化的导航和布局
- 平板电脑友好的交互设计
- 桌面端的高效工作流
- 精确的组件间距和对齐
🎨 UI 组件库
我们的启动套件包含了丰富的预构建组件，帮助您快速组装精美的界面：
- 现代化的导航栏和页脚
- 引人注目的英雄区域
- 特色功能展示组件
- 专业的徽标云展示
- 灵活的FAQ手风琴组件
- 精美的定价卡片
- 引人注目的行动号召按钮
- 引导用户的清晰路径
快速开始
前提条件
- Node.js 18+ 和 npm
- Supabase 账户
- Creem.io 账户
步骤 1: 克隆仓库
git clone https://github.com/yourusername/raphael-starter-kit.git
cd raphael-starter-kit
步骤 2: 安装依赖
npm i
步骤 3: 设置 Supabase
-
在 Supabase 上创建一个新项目 - 点击"新建项目" - 填写基本信息（项目名称、密码等）
-
前往 项目设置 > API 获取项目凭证 - 从项目设置页面复制凭证信息 - 将凭证粘贴到.env文件中
-
配置登录认证 - 选择【Auth】>【Providers】 - 选择email认证 - 关闭"Confirm email"选项并保存设置
-
(可选) 设置Google登录 - 进入Google 开发者控制台，创建新项目 - 配置项目权限 - 前往【API与服务】>【凭据】 - 创建OAuth客户端ID - 添加授权来源URL和重定向URI - 重定向URI格式:
https://<项目ID>.supabase.co/auth/v1/callback- 复制OAuth客户端ID和密钥 -
在Supabase配置Google认证 - 打开Auth > Providers > Google - 填写从Google开发者控制台获取的客户端ID和密钥 - 启用Google认证
-
设置定向URL - 将定向URL更改为您的线上地址 - 确保URL与Google开发者控制台中的地址完全一致
-
设置环境变量
bash cp .env.example .env.local
在.env.local中更新Supabase变量:
NEXT_PUBLIC_SUPABASE_URL=你的项目URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=你的匿名密钥
SUPABASE_SERVICE_ROLE_KEY=你的服务角色密钥
- 创建数据库表结构 - 复制SQL代码到Supabase SQL编辑器 - 执行SQL创建必要的表结构
步骤 4: 设置 Creem.io
- 登录到 Creem.io 仪表板
-
初始设置 - 打开测试模式 - 导航到顶部导航栏中的"开发者"部分 - 复制API Key并粘贴到.env文件中
-
创建Webhooks - 前往开发者 > Webhooks - 创建新的Webhook - 填写URL:
https://你的域名/api/webhooks/creem- 复制Webhook密钥并粘贴到.env文件中 -
更新环境变量
CREEM_API_URL=https://test-api.creem.io/v1 -
创建收费项目 - 在Creem.io中创建订阅项目和积分项目 - 复制项目ID并配置到代码中
-
完整的环境变量示例 ``` # Supabase配置 NEXT_PUBLIC_SUPABASE_URL=你的supabaseURL NEXT_PUBLIC_SUPABASE_ANON_KEY=你的supabase pubilc key SUPABASE_SERVICE_ROLE_KEY=你的supabase SERVICE_ROLE key
# Creem配置 CREEM_WEBHOOK_SECRET=你的webhook key CREEM_API_KEY=你的creem key CREEM_API_URL=https://test-api.creem.io/v1
# 站点URL配置 NEXT_PUBLIC_SITE_URL=http://你的线上地址
# 支付成功后的重定向URL CREEM_SUCCESS_URL=http://你的线上地址/dashboard ```
步骤 5: 运行开发服务器
npm run dev
访问 http://localhost:3000 查看你的应用程序。
步骤 6: Vercel部署
- 将代码推送到GitHub
- 将仓库导入到Vercel
- 添加所有环境变量
- 完成部署
步骤 7: 更新Webhook回调地址
- 进入Creem.io，打开开发者模式
- 更新Webhooks配置
- 进入对应的Webhook设置
- 点击"更多"，选择"编辑"
- 将线上地址更新为:
https://你的域名/api/webhooks/creem
步骤 8: 测试系统功能
- 测试用户登录功能
- 测试订阅支付功能（测试信用卡号: 4242 4242 4242 4242）
- 测试积分购买功能
步骤 9: 设计网站首页
-
使用组件库 - 您可以使用TailwindCSS上的组件 - 复制代码到相应的组件文件中
-
自定义页面配色 - 调整全局色系 - 将样式代码添加到全局CSS文件中
-
根据需要精修页面布局
步骤 10: 切换到正式付款
- 进入Creem.io，关闭测试模式
- 创建新的正式项目，将ID更新到代码中
- 更新环境变量，将API URL从测试环境切换到正式环境: ``` # 将此行 CREEM_API_URL=https://test-api.creem.io/v1
# 替换为 CREEM_API_URL=https://api.creem.io ```
💳 订阅系统详情
启动套件包含由 Creem.io 提供支持的完整订阅系统：
- 多级订阅方案
- 基于使用量的计费
- 积分系统
- 订阅管理
- 安全支付处理
- Webhook 集成实时更新
- 自动发票生成
- 全球支付支持（特别适合中国大陆商家）
设置 Webhooks
处理订阅更新和支付事件:
- 前往 Creem.io 仪表板
- 导航到 开发者 > Webhooks
- 添加你的 webhook 端点:
https://your-domain.com/api/webhooks/creem - 复制 webhook 密钥并添加到你的
.env.local:CREEM_WEBHOOK_SECRET=你的webhook密钥
项目结构
├── app/ # Next.js 应用目录
│ ├── (auth-pages)/ # 身份验证页面
│ ├── dashboard/ # 仪表板页面
│ ├── api/ # API 路由
│ └── layout.tsx # 根布局
├── components/ # React 组件
│ ├── ui/ # Shadcn/ui 组件
│ ├── dashboard/ # 仪表板组件
│ └── home/ # 登陆页面组件
│ └── layout/ # 页面布局组件
├── hooks/ # 自定义 React 钩子
├── lib/ # 工具库
├── public/ # 静态资源
├── styles/ # 全局样式
├── types/ # TypeScript 类型
└── utils/ # 工具函数
支持与联系
如果您有任何问题或需要支持，请通过微信联系我们。
本文档为站内渲染。原始文件本地路径：saas/source/templates/模版-template-raphael-starterkit-v1-main-README-4d772a.md（仅本地保留，不入库不部署）