垦荒学园

简体中文

English

简体中文

English

切换主题

Next.js Vercel 部署 ☁️ ​

🎯 概述 ​

Vercel 是 Next.js 的官方部署平台，提供零配置部署、自动 HTTPS、全球 CDN 等功能。

📦 快速部署 ​

通过 Git ​

  1. 推送代码到 GitHub/GitLab/Bitbucket
  2. 访问 vercel.com
  3. 点击 "Import Project"
  4. 选择仓库
  5. 点击 "Deploy"

通过 CLI ​

bash
npm install -g vercel
vercel login
vercel

🚀 环境变量 ​

添加环境变量 ​

bash
# Vercel Dashboard
Settings → Environment Variables

DATABASE_URL=postgresql://...
JWT_SECRET=your-secret
NEXT_PUBLIC_API_URL=https://api.example.com

本地开发 ​

bash
vercel env pull .env.local

📝 自定义域名 ​

添加域名 ​

  1. Project Settings → Domains
  2. 输入域名
  3. 配置 DNS 记录
A     @     76.76.21.21
CNAME www   cname.vercel-dns.com

🎨 预览部署 ​

自动预览 ​

  • 每个 Pull Request 自动创建预览部署
  • 独立的 URL
  • 完整的功能测试

手动预览 ​

bash
vercel --prod=false

📊 性能监控 ​

Analytics ​

tsx
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react'

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

Speed Insights ​

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

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

📚 最佳实践 ​

1. 分支部署 ​

  • main → 生产环境
  • develop → 预览环境
  • PR → 临时预览

2. 环境配置 ​

js
// next.config.js
module.exports = {
  env: {
    CUSTOM_KEY: process.env.CUSTOM_KEY,
  },
}

3. 构建缓存 ​

Vercel 自动缓存：

  • node_modules
  • .next/cache

🔗 相关资源 ​

下一步：学习 Next.js 自定义服务器。