Kenhuang Academy
  • English

      • Next.js Vercel Deployment

      Overview

      Vercel is the official deployment platform for Next.js, offering zero-configuration deployment, automatic HTTPS, global CDN, and more.

      Quick Deployment

      Via Git

      1. Push code to GitHub/GitLab/Bitbucket
      2. Visit vercel.com
      3. Click "Import Project"
      4. Select your repository
      5. Click "Deploy"

      Via CLI

      npm install -g vercel
vercel login
vercel

      Environment Variables

      Adding Environment Variables

      # Vercel Dashboard
Settings → Environment Variables

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

      Local Development

      vercel env pull .env.local

      Custom Domains

      Adding a Domain

      1. Project Settings → Domains
      2. Enter your domain
      3. Configure DNS records
      A     @     76.76.21.21
CNAME www   cname.vercel-dns.com

      Preview Deployments

      Automatic Previews

      • Each Pull Request automatically creates a preview deployment
      • Independent URL
      • Full feature testing

      Manual Preview

      vercel --prod=false

      Performance Monitoring

      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>
  )
}

      Best Practices

      1. Branch Deployments

      • main → Production
      • develop → Preview
      • PR → Temporary preview

      2. Environment Configuration

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

      3. Build Cache

      Vercel automatically caches:

      • node_modules
      • .next/cache

      Previous Chapter: Next.js Build and Deployment | Next Chapter: Next.js Custom Server