AI AI 工具指南
独立开发 / 建站指南

Next.js 部署到 Vercel：10 分钟完整流程（2026）

2026 年版 Next.js 部署到 Vercel 教程——自动识别、环境变量、ISR、图片优化、App Router 注意事项，把独立开发者卡半天的几件事一次讲完。

发布于: 作者: AI Productivity Guide Team 🌐 查看英文版本

Next.js 部署到 Vercel 最接近”一键上线”——但”几乎零配置”不是”零配置”。默认值能覆盖 90% 场景，剩下 10%（环境变量、自定义域名、图片域名、函数 region）能让独立开发者卡半天。

问题背景

Vercel 是 Next.js 母公司，集成深度无人能比——自动识别框架、每个 PR 自动 preview、静态资产边缘部署、Hobby 免费档够多数独立项目起步。代价是规模上来后按用量计费，以及绑定 Vercel 特有功能（ISR、边缘图片优化）。

判断标准

  • 项目在 GitHub / GitLab / Bitbucket 仓库里。
  • 想要每个 PR 都自动出 preview URL，不想自己搭 CI。
  • 能接受 Hobby 配额用完按用量计费。

实操步骤

  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 main

  2. 登录 vercel.com（用同一个 Git 账号 OAuth 授权），点 Add New → Project，找到 repo，点 Import。Vercel 会自动识别 Next.js 并填好：

    Framework Preset:   Next.js
Build Command:      next build
Output Directory:   .next   (留空即可，自动)
Install Command:    npm install

  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 里加。

  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）；Network 面板看 _next/static/* 响应头：

    x-vercel-cache: HIT     # 静态资源走 CDN
age: 123                # 缓存命中后的秒数

  6. 加自定义域名。Settings → Domains → Add，输入 yoursite.com，按 Vercel 给的 DNS 记录去你的 DNS 商配：

    类型    名称    值
A       @       76.76.21.21
CNAME   www     cname.vercel-dns.com

    Cloudflare 用户：proxy 状态切到 DNS only（灰云），让 Vercel 自己签 SSL；不然会 SSL handshake 失败。验证：

    dig yoursite.com +short
# 应返回 76.76.21.21
curl -sI https://yoursite.com | head -5
# HTTP/2 200
# server: Vercel

  7. 配 next.config.js 的图片白名单（用 next/image 加载外部域名图片必须配，否则报 Invalid src prop）：

    // 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;

  8. （可选）改函数 region。默认 iad1（弗吉尼亚），亚洲用户改 hnd1（东京）或 sin1（新加坡）。项目根新建 vercel.json：

    \{
  "functions": \{
    "app/api/**": \{
      "maxDuration": 10,
      "regions": ["hnd1"]
    \}
  \}
\}

    或在 App Router 的 route segment 用边缘运行时：

    // app/api/hello/route.ts
export const runtime = 'edge';

  9. 验证 PR preview。新建分支推上去：

    git checkout -b test-preview
echo "<!-- test -->" >> README.md
git commit -am "test preview"
git push -u origin test-preview
gh pr create --fill

    Vercel 会在 PR 里贴出 <branch>-<hash>.vercel.app preview URL，作为 check 之一。reviewer 点过去看就是这个分支的部署。

容易踩的坑

  • 忘配环境变量，生产里本地能跑的字段全 undefined——Vercel 不读 .env.local。
  • 配了 output: 'export' 然后发现 image optimization、API route、middleware 全没了。
  • next.config.js 没配 images.remotePatterns——next/image 拒绝优化没在白名单里的外部图片。
  • 函数 region 留默认（iad1），用户在另一个洲——vercel.json 配 region 或 export const runtime = 'edge'。
  • 把 preview URL 当生产——算力配额一样但环境变量不同，promote 前要测过。

这篇适合谁

第一次部署 Next.js，或者不想运维 pipeline 想要 CI/CD 的独立开发者。

这篇不适合谁

高带宽纯静态站（Cloudflare Pages 或 Firebase Hosting 更便宜），或者已经在 AWS / GCP 上、想复用基础设施的项目。

FAQ

  • Next.js 必须用 Vercel 吗？: 不必。Next.js 在任何能跑 Node 的地方都能跑——AWS、Cloudflare（通过 OpenNext）、自建。但 Vercel 集成最深，搬走会损失一些功能。
  • Hobby 真免费吗？: 个人非商业用途免费，有带宽和函数执行配额。商业 / 团队要 Pro（2026 年 $20/人/月）。
  • Vercel 每次 push 都自动部署吗？: 是的——main 部到生产，其它分支部到 preview。可以在 Settings 里按分支关掉。
  • 能回滚吗？: 能——Deployments 里找上一个好版本，点 “Promote to Production”。即时回滚。

相关阅读

标签: #独立开发 #Next.js #Vercel #部署 / 托管 #入门

相关文章