跳转到主要内容
Vercel 是 Birthday Wall 推荐的托管平台，因为它为 Next.js 而生，自动处理构建和运行时，并提供慷慨的 Hobby 免费套餐，对一个个人生日站来说绰绰有余。本页将带你完成从 GitHub 推送到上线 URL 的每一步。

​
本地开发

部署前可以先在本地运行 Birthday Wall 来验证你的配置：
开发服务器会启动在 http://localhost:3000。在推送前如需本地测试生产构建：
如果带着 .env.local 在本地构建成功，Vercel 上的部署也会成功。

​
部署到 Vercel

1

把 Fork 推送到 GitHub

确保你的仓库已经推送到 GitHub（或 GitLab / Bitbucket — Vercel 这三家都支持）。Vercel 需要访问仓库以拉取源代码并设置自动部署。
2

在 Vercel 中导入仓库

  1. 登录 vercel.com，点击 Add New… → Project。
  2. 在 Import Git Repository 下点击 Continue with GitHub（或你的 Git 服务商），按提示授权 Vercel。
  3. 在列表中找到你的 Birthday Wall 仓库，点击 Import。
3

确认框架预设

Vercel 会自动识别 Next.js 项目并设置正确的构建配置：
  • Framework Preset：Next.js
  • Build Command：next build
  • Output Directory：.next
  • Install Command：npm install
你不需要修改这些设置中的任何一项。
4

添加环境变量

在点击 Deploy 之前，请向下滚动到 Environment Variables 区域，添加全部五个必需变量：每个变量的说明以及如何在 Supabase 中找到对应值，请参阅 环境变量页面。
5

部署

点击 Deploy。Vercel 会克隆你的仓库，运行 npm install，然后执行 next build 并发布结果。首次构建通常需要 2 到 3 分钟。部署完成后，Vercel 会显示 Congratulations 页面，并给出你的上线 URL（如 https://birthday-wall-abc123.vercel.app）。
6

设置 NEXT_PUBLIC_SITE_URL 并重新部署

复制 Vercel 刚刚分配给你项目的生产 URL。然后：
  1. 进入 Project Settings → Environment Variables。
  2. 编辑 NEXT_PUBLIC_SITE_URL，把生产 URL 粘贴为它的值。
  3. 触发一次重新部署：在 Deployments 标签页找到最新部署，点击 … 菜单并选择 Redeploy。
这样，认证回跳和任何绝对 URL 的生成才会指向你真实的域名。
7

（可选）绑定自定义域名

如果你希望站点跑在自定义域名（如 happy-birthday-alex.com）下：
  1. 在 Vercel 项目中前往 Settings → Domains。
  2. 输入你的域名并点击 Add。
  3. 按提示在域名注册商处添加 DNS 记录（Vercel 会给出需要创建的精确记录）。
  4. 把 NEXT_PUBLIC_SITE_URL 更新为你的自定义域名并重新部署。
Vercel 会自动为你的域名签发并续期 TLS 证书。

​
自动部署

一旦项目连接到了 GitHub，Vercel 会将每次推送到 main 分支的提交自动作为新的生产部署。推送到其他分支会得到一个独立的预览 URL，方便你在上线前查看变更。

​
管理员子域名（可选）

Birthday Wall 支持一个可选的管理员子域名。指向 admin.<your-domain> 的请求会被自动路由到 /admin 后台。如果你希望通过子域名访问后台：
  1. 在 Vercel 中前往 Settings → Domains。
  2. 添加 admin.<your-domain> 作为附加域名，并按提示配置 DNS。
重写会自动生效 — 无需修改任何代码。
Vercel 的 Hobby 免费套餐对个人生日站来说完全够用。在典型的个人使用场景下，无需担心带宽或构建时长。