架构概览
Birthday Wall 把职责清晰地分到两个托管服务中:
Next.js App Router 负责所有页面渲染,并通过
/api/ 暴露 API 路由。服务端路由专门使用 Supabase 的 service role key — 你的数据库凭据永远不会被发送到浏览器。公开读取使用 anon key,可以安全暴露。
可选的管理员子域名重写功能可以让你通过 admin.<your-domain> 访问管理后台,同时保留默认的 /admin 路径。
前置条件
开始前,请准备好:- Node.js 18 或更高版本 — 用于本地运行和构建 Next.js 应用
- 一个 Supabase 账号 — 免费档已经足够;无需信用卡
- 一个 Vercel 账号 — Hobby 免费套餐对个人生日站完全够用,不必担心用量
- 一个 GitHub 账号 — Vercel 直接从 GitHub 仓库部署
部署步骤
按以下三页文档顺序操作,从 Fork 仓库到上线一气呵成:1
创建并配置 Supabase 项目
创建 Supabase 项目,运行数据库迁移,并收集 API 凭据。设置 Supabase →
2
设置环境变量
为本地开发和 Vercel 部署配置五个必需的环境变量。配置环境变量 →
3
部署到 Vercel
在 Vercel 中导入仓库、添加环境变量,然后点击 Deploy。部署到 Vercel →
倒计时、电台、报告和游戏页面都不需要 Supabase 连接也能正常工作。只有祝福墙(
/write 页面和留言展示)需要数据库。如果你跳过 Supabase 设置,这些功能会报错,但站点其他部分仍然完全可用。