Next.js部署到Vercel #

一、Vercel概述 #

1.1 什么是Vercel #

Vercel是Next.js的官方托管平台：

零配置部署
自动CI/CD
全球CDN
预览部署

1.2 部署方式 #

方式	说明
Git集成	推送自动部署
CLI	命令行部署
API	编程部署

二、Git集成部署 #

2.1 连接仓库 #

登录 Vercel
点击 “New Project”
导入 Git 仓库
配置项目设置
点击 “Deploy”

2.2 自动部署 #

每次推送到主分支自动部署：

bash

git add .
git commit -m "Update"
git push origin main

2.3 预览部署 #

Pull Request 自动创建预览：

text

https://your-app-git-branch-username.vercel.app

三、CLI部署 #

3.1 安装Vercel CLI #

bash

npm install -g vercel

3.2 登录 #

bash

vercel login

3.3 部署 #

bash

vercel

3.4 部署到生产 #

bash

vercel --prod

四、环境变量 #

4.1 控制台配置 #

进入项目设置
点击 “Environment Variables”
添加变量

4.2 CLI配置 #

bash

vercel env add DATABASE_URL

4.3 配置文件 #

json

{
    "env": {
        "DATABASE_URL": "postgresql://...",
        "NEXT_PUBLIC_API_URL": "https://api.example.com"
    }
}

4.4 环境区分 #

环境	说明
Production	生产环境
Preview	预览环境
Development	开发环境

五、域名配置 #

5.1 添加域名 #

进入项目设置
点击 “Domains”
输入域名
验证域名

5.2 DNS配置 #

A记录

text

A @ 76.76.21.21

CNAME记录

text

CNAME www cname.vercel-dns.com

5.3 自动HTTPS #

Vercel 自动为域名配置 HTTPS。

六、构建配置 #

6.1 vercel.json #

json

{
    "buildCommand": "npm run build",
    "outputDirectory": ".next",
    "framework": "nextjs",
    "regions": ["hkg1", "sfo1"],
    "functions": {
        "app/api/**/*.ts": {
            "memory": 1024,
            "maxDuration": 10
        }
    }
}

6.2 函数配置 #

json

{
    "functions": {
        "app/api/**/*.ts": {
            "memory": 3008,
            "maxDuration": 60
        }
    }
}

6.3 路由重写 #

json

{
    "rewrites": [
        {
            "source": "/api/:path*",
            "destination": "https://api.example.com/:path*"
        }
    ]
}

七、监控与分析 #

7.1 Analytics #

tsx

import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
    return (
        <html>
            <body>
                {children}
                <Analytics />
            </body>
        </html>
    )
}

7.2 Speed Insights #

tsx

import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({ children }) {
    return (
        <html>
            <body>
                {children}
                <SpeedInsights />
            </body>
        </html>
    )
}

八、最佳实践 #

8.1 分支策略 #

main → 生产环境
develop → 预览环境
feature/* → 预览部署

8.2 环境变量管理 #

敏感信息使用环境变量
区分环境配置
使用 .env.example 文档

8.3 监控告警 #

配置部署通知
设置错误告警
监控性能指标

九、总结 #

Vercel部署要点：

要点	说明
Git集成	自动部署
CLI	命令行部署
环境变量	多环境配置
域名	自定义域名
监控	Analytics

下一步，让我们学习Docker部署！