跳转到主要内容
本指南将带你从零开始，在 10 分钟内上线一份 Birthday Wall。你将完成 Fork 仓库、安装依赖、连接 Supabase 数据库、自定义生日配置，并部署到 Vercel。
第 3–5 步（Supabase 设置和环境变量）只有在你希望祝福墙保存留言时才是必需的。倒计时、音乐电台和游戏在没有数据库连接时也能正常工作 — 你可以直接跳到第 6 步先在本地运行应用。
1

Fork 并克隆仓库

在 GitHub 上 Fork Birthday Wall 仓库，然后把你的 Fork 克隆到本地。
从 github.com/helloxiaozhen/birthday-web Fork 之后，把 your-username 替换成你自己的 GitHub 用户名。
2

安装依赖

Birthday Wall 基于 Next.js 14 和 Supabase。使用 npm 安装所有依赖。
3

设置 Supabase

创建一个 Supabase 项目，并为祝福墙和页面配置创建所需的数据库表。完整步骤请参阅 Supabase 设置指南，其中包括：
  • 创建新的 Supabase 项目
  • 运行迁移 SQL 创建所有必需的数据表
  • 启用行级安全策略（RLS）
  • 获取项目 URL 和 API 密钥
4

设置环境变量

在项目根目录创建一个 .env.local 文件，并添加以下变量。变量值可以在 Supabase 项目的 Project Settings → API 中找到。
切勿在客户端代码中暴露 SUPABASE_SERVICE_ROLE_KEY，也不要将其提交到版本控制 — 它拥有完整的数据库访问权限。
5

自定义生日配置

打开 lib/birthday-config.ts，用寿星的信息更新 person 对象。
需要设置的字段：
6

本地运行

启动开发服务器，并在浏览器中打开应用。
访问 http://localhost:3000 查看生日倒计时。访问 /radio、/write、/report 和 /games 可以预览所有五个页面。
7

部署到 Vercel

当你准备好分享 Birthday Wall 时，就可以将其部署到 Vercel。完整步骤请参阅 Vercel 部署指南，其中包括：
  • 将代码推送到 GitHub
  • 在 Vercel 中导入仓库
  • 在 Vercel 仪表板中添加所有环境变量
  • 配置自定义域名（可选）
在 Vercel 设置过程中，记得把 NEXT_PUBLIC_SITE_URL 更新为你的生产环境 URL，而不是 http://localhost:3000。

​
下一步

Birthday Wall 上线后，可以浏览下面的指南进一步自定义。

自定义生日配置

修改寿星姓名、日期、问候语和倒计时文案。

为电台添加歌曲

创建包含歌曲标题、艺人、歌词和封面图的精选歌单。

祝福墙

了解访客如何提交祝福，以及如何在后台管理它们。

环境变量参考

全部必选与可选环境变量的完整列表。