Vercel 部署 Next.js Nuxt.js 全栈应用完全教程

为什么选择 Vercel

• 免费额度大 – 个人项目基本免费
• 部署简单 – Git 推送自动部署
• 边缘网络 – 全球 CDN，访问快
• Serverless – 支持 API 路由
• 预览部署 – 每个 PR 自动预览

支持的框架

• Next.js（官方推荐）
• Nuxt.js
• Gatsby
• Remix
• Vue/React 静态站点
• 任何能构建为静态或 Serverless 的框架

部署步骤

第一步：连接 GitHub

1. 访问 vercel.com
2. 使用 GitHub 账号登录
3. 授权 Vercel 访问 GitHub

第二步：导入项目

1. 点击「New Project」
2. 选择 GitHub 仓库
3. Vercel 自动检测框架

第三步：配置环境变量

在 Project Settings 中添加：

• DATABASE_URL
• API_KEY
• 其他环境变量

第四步：部署

点击「Deploy」，Vercel 自动构建并部署。

Next.js 部署配置

// next.config.js
module.exports = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ['images.unsplash.com'],
  },
}

自定义域名配置

添加域名

1. Project Settings → Domains
2. 输入你的域名
3. 添加 DNS 记录

DNS 配置

# 添加 CNAME 记录
CNAME -> cname.vercel-dns.com

Vercel CLI

# 安装
npm i -g vercel

# 登录
vercel login

# 部署
vercel

# 生产环境部署
vercel --prod

# 查看日志
vercel logs my-project

Vercel Edge Functions

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}

export const config = {
  matcher: '/about/:path*',
}

常见问题

Q: 部署失败？

检查 build command 和 output directory 是否正确。

Q: 如何查看构建日志？

在 Deployment 页面点击具体部署，查看实时日志。

总结

Vercel 是部署前端和全栈应用的最佳选择之一。免费额度大、部署简单、性能优秀。建议所有 Next.js 和 Nuxt.js 项目都使用 Vercel 部署。