JSTAcademy
0 XP
Dashboard
Crash Courses
Deployment & Vercel
10 min
PhD+200 XP
Crash Courses · PhD

Deployment & Vercel

Deploy Next.js to Vercel with environment setup, domain config, and CI/CD.
10 min read+200 XP on completionCert: Next.js Crash Course
Tap any word in the text below to start reading from there.

Deployment & Vercel

Vercel is the zero-config deployment platform for Next.js — built by the same team.

Deploy from CLI

# Install Vercel CLI
npm i -g vercel

# Deploy to preview
npx vercel

# Deploy to production
npx vercel --prod

# Alias to a custom domain
npx vercel alias <deployment-url> academy.jsupremeconglomerate.online

Environment Variables in Vercel

# Add via CLI (prompts for value)
vercel env add AZURE_SPEECH_KEY production
vercel env add AZURE_SPEECH_KEY preview

# Pull to local .env.local
vercel env pull .env.local

Set env vars for BOTH production and preview environments — preview deployments (PRs) need them too.

vercel.json Config

{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" }
      ]
    }
  ],
  "rewrites": [
    { "source": "/old-api/:path*", "destination": "/api/:path*" }
  ]
}

Checklist Before Going Live

✅ All env vars added to Vercel (Production + Preview)
✅ Custom domain DNS set (A record or CNAME to Vercel)
✅ Domain aliased to latest production deployment
✅ Images configured (remotePatterns for external hosts)
✅ TypeScript build passes (npx tsc --noEmit)
✅ No hardcoded secrets in source code
✅ Error boundaries in place for critical routes
0%