Next.js 部署到 Vercel，是 Web 开发里最接近”一键上线”的体验。但”几乎零配置”不等于”零配置”。默认值能覆盖大约 90% 的项目，剩下 10%（环境变量、自定义域名、next/image 域名、函数 region）正是第一次部署的人卡掉半天的地方。这篇会带你从本地仓库走到自定义域名上线，给出确切命令、要检查的响应头，以及最容易引发求助帖的四个错误。
一句话总结
- 推到 GitHub，在 vercel.com 导入，Vercel 自动识别 Next.js。首次 build 一般 60–120 秒。
- 环境变量放在 dashboard，不是
.env.local（Vercel 从不读.env.local）。漏配某个 key 是”本地正常、生产undefined”的头号原因。 - 免费的 Hobby 档仅限非商业用途，每月封顶 100 GB 快速数据传输（Fast Data Transfer，截至 2026 年 6 月）。商业或团队使用要上 Pro，$20/席位/月。
- 外部图片必须在
next.config.js里配白名单（images.remotePatterns），否则next/image报Invalid src prop。 - 函数默认在
iad1（美国华盛顿特区）region。用户在别处就改掉它。
Hobby 与 Pro 的真正区别
Hobby 是真免费、也够用来上线，但它明确是非商业的。一旦你挂出定价页、跑广告，或者拉进一个队友，Vercel 的条款就要求用 Pro。下面是对独立开发者上线真正有影响的配额，截至 2026 年 6 月：
| 配额（每月） | Hobby（免费） | Pro（$20/席位） |
|---|---|---|
| 商业用途 | 不允许 | 允许 |
| 快速数据传输 | 100 GB | 含 1 TB，超出按量计费 |
| 函数调用次数 | 1,000,000 | 含 1,000,000 |
| 边缘请求 | 1,000,000 | 含 10,000,000 |
| Build 执行时长 | 6,000 分钟 | 含额度 |
| 图片优化（源图） | 1,000 张 | 含 5,000 张 |
| 每日部署次数 | 100 | 6,000 |
| 并发 build | 1 | 12 |
| 单次部署 build 时长 | 最长 45 分钟 | 最长 45 分钟 |
Hobby 有个值得点名的坑：一旦超出某项配额，对应功能会被暂停，直到 30 天周期滚动重置。Pro 则是按量计费（例如快速数据传输超出首个 1 TB 后 $0.15/GB），每月还有 $20 抵扣额度。多数副业项目里，Hobby 的 100 GB 绰绰有余；但一个有真实流量的内容站会越过这条线。
Vercel 适不适合你
以下情况优先选 Vercel：
- 项目在 GitHub、GitLab 或 Bitbucket 仓库里。
- 想让每个 PR 都自动出 preview URL，又不想自己搭 CI。
- 能接受 Hobby 配额用完后按量计费。
Vercel 是 Next.js 的母公司，集成深度无人能比：自动识别框架、每个 PR 自动 preview、静态资产边缘缓存，以及一流的增量静态再生（ISR）。代价是规模上来后按用量计费，以及对 Vercel 特有功能有一定绑定。如果你跑的是高带宽纯静态站，Cloudflare Pages 或 Firebase Hosting 可能更便宜；如果你本来就在 AWS 或 GCP 上，复用那套基础设施可能比再上一个平台划算。想直接对比，看 Firebase 与 Vercel 怎么选。
实操步骤
1. 把 Next.js 项目推到 GitHub
本地还没有 git 历史就先：
git init
git add .
git commit -m "initial commit"
# 装了 gh CLI：
gh repo create my-next-app --public --source=. --push
# 没装就先在 github.com 建 repo，然后：
git remote add origin https://github.com/you/my-next-app.git
git branch -M main
git push -u origin main2. 导入仓库
用同一个 Git 账号在 vercel.com 登录（OAuth 授权），点 Add New → Project，找到 repo，点 Import。Vercel 会自动识别 Next.js 并填好：
Framework Preset: Next.js
Build Command: next build
Output Directory: .next (留空即可，自动)
Install Command: npm install这几项基本不用动。唯一常见的改动是在 Settings → General 里改 Node.js 版本——如果你在 package.json 的 engines 字段里钉死了某个版本。
3. 加环境变量
在同一页面的 Environment Variables 里粘环境变量，一行一对 KEY=VALUE：
DATABASE_URL=postgresql://user:pass@host:5432/db
NEXT_PUBLIC_SITE_URL=https://yoursite.com
RESEND_API_KEY=re_xxxxxxxxxxxxxxxx每条变量右侧勾选生效环境（Production / Preview / Development）。同一个 key 可以在不同环境放不同值。本地继续用 .env.local，但要记住 Vercel 不读 .env.local——它只用 dashboard 里的值。要在浏览器里能拿到的变量必须以 NEXT_PUBLIC_ 开头，其余的都只留在服务端。
4. 部署
点 Deploy。首次 build 通常 60–120 秒。完成后给你一个 project-hash.vercel.app URL。
5. 验证部署
打开生成的 *.vercel.app 域名。DevTools → Console 看有没有 hydration 报错（Hydration failed because the initial UI does not match what was rendered on the server——通常是渲染时用了 Date.now()、Math.random() 或 window 判断导致）。DevTools → Network 里点任意 _next/static/* 资源，看响应头：
x-vercel-cache: HIT # 静态资源走边缘缓存
age: 123 # 缓存填充后的秒数出现 HIT 就说明资源是从 Vercel 的 CDN 发出来的，而不是临时重新渲染。
6. 绑定自定义域名
进 Settings → Domains → Add，输入 yoursite.com，再按 Vercel 给的 DNS 记录去你的 DNS 商配。截至 2026 年 6 月，Vercel 给新项目签发的 apex IP 有更新，所以请直接用 dashboard 给你的那组值，别从任何教程里照抄。典型的一组是：
类型 名称 值
A @ 216.198.79.1 (或 76.76.21.21——以 dashboard 显示为准)
CNAME www cname.vercel-dns.comCloudflare 用户：把 proxy 切到 DNS only（灰云），让 Vercel 自己签 SSL 证书；留着橙云会导致 SSL handshake 失败。验证：
dig yoursite.com +short
# 应返回 dashboard 里那个 A 记录 IP
curl -sI https://yoursite.com | head -5
# HTTP/2 200
# server: Vercel7. 给 next/image 配外部图片白名单
要加载外部域名的图片，得把这些域名加到 next.config.js 的 images.remotePatterns，否则 next/image 报 Invalid src prop ... hostname is not configured under images in your next.config.js：
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{ protocol: 'https', hostname: 'images.unsplash.com' },
{ protocol: 'https', hostname: 'cdn.yoursite.com' },
],
},
};
module.exports = nextConfig;尺寸和 priority 调优见 Next.js 图片优化基础。注意 Hobby 每月含 1,000 张优化源图，图片量大的站点要盯着这条线。
8.（可选）设置函数 region
Vercel 函数默认在 iad1（华盛顿特区）。用户集中在亚洲就改成 hnd1（东京）或 sin1（新加坡）。在项目根目录新建 vercel.json：
{
"functions": {
"app/api/**": {
"maxDuration": 60,
"regions": ["hnd1"]
}
}
}启用 Fluid Compute（2026 年新项目的默认值）后，函数 maxDuration 默认值在所有档位都是 300 秒；Hobby 封顶 300 秒，Pro 最高可到 800 秒（约 13 分钟）。对延迟敏感的路由，也可以在 App Router 里按 route 改用边缘运行时：
// app/api/hello/route.ts
export const runtime = 'edge';9. 确认 PR preview 正常
新建分支并开 PR：
git checkout -b test-preview
echo "<!-- test -->" >> README.md
git commit -am "test preview"
git push -u origin test-preview
gh pr create --fillVercel 会在 PR 里贴出 branch-hash.vercel.app preview URL，作为一项 check。reviewer 点进去看的就是这个分支的部署——它跑的代码和算力与生产一致，但用的是你勾给 Preview 的环境变量。
最耗时间的四个错误
- 忘配环境变量。 本地能跑的字段在生产里返回
undefined，因为 Vercel 不读.env.local。每个 key 都要在 dashboard 里加，并勾上 Production。 - 误开
output: 'export'。 静态导出会关掉图片优化、API route、ISR 和 middleware。这些里有任何一个要用，就别开它。 - 跳过
images.remotePatterns。next/image拒绝优化任何没进白名单的外部域名，而且这个错只在运行时才暴露。 - 面向非美国用户却把 region 留在
iad1。 在vercel.json里配regions，或把延迟关键的路由改成export const runtime = 'edge'。
还有一条：把 preview URL 当 preview 用。它和生产共享算力配额，但带的是 Preview 那套环境变量，所以”Promote to Production”前先测一遍 build。
常见问题
- Next.js 必须用 Vercel 吗？ 不必。Next.js 在任何能跑 Node 的地方都能跑——AWS、Cloudflare（通过 OpenNext）、自建。只是 Vercel 集成最深，搬走会损失边缘 ISR 和图片优化这些便利。
- Hobby 真免费吗？ 真的，非商业用途免费，截至 2026 年 6 月每月含 100 GB 快速数据传输和 100 万次函数调用。一旦上了定价页、广告，或拉进队友，就得用 Pro，$20/席位/月。
- 每次 push 都会自动部署吗？ 会。
main部到生产，其它分支部到 preview URL。可以在 Settings → Git 里按分支关掉。 - 能即时回滚吗？ 能。进 Deployments 找上一个好版本，点 Promote to Production。因为旧版本已经构建好了，回滚是瞬间完成的。
- 首次 build 要多久？ 全新 Next.js 应用一般 60–120 秒。所有档位 build 都封顶 45 分钟；如果接近这个上限，就靠 ISR 让更少的页面在 build 时渲染。
- 超过 Hobby 的 100 GB 会怎样？ 对应功能会被暂停，直到 30 天周期重置。增长中的项目想避免停服，就在触顶前升到 Pro。