垦荒学园
  • 中文

      • Next.js Vercel 部署 ☁️

      🎯 概述

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

      📦 快速部署

      通过 Git

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

      通过 CLI

      npm install -g vercel
vercel login
vercel

      🚀 环境变量

      添加环境变量

      # Vercel Dashboard
Settings → Environment Variables

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

      本地开发

      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
      • 完整的功能测试

      手动预览

      vercel --prod=false

      📊 性能监控

      Analytics

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

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

      Speed Insights

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

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

      📚 最佳实践

      1. 分支部署

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

      2. 环境配置

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

      3. 构建缓存

      Vercel 自动缓存：

      • node_modules
      • .next/cache

      🔗 相关资源

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