Deployment & Vercel

Deployment & Vercel

Vercel is the zero-config deployment platform for Next.js — built by the same team. Every git push can deploy your app automatically with no server provisioning.

Deploy from CLI

# Install the Vercel CLI globally
npm i -g vercel

# Log in (first time)
vercel login

# Deploy to preview (staging URL for testing)
npx vercel

# Deploy to production
npx vercel --prod

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

Environment Variables in Vercel

# Add an env var (prompts for value securely)
vercel env add AZURE_SPEECH_KEY production
vercel env add AZURE_SPEECH_KEY preview

# Pull all Vercel env vars to local .env.local
# Keeps your local environment in sync with production
vercel env pull .env.local

Critical: set env vars for both Production and Preview. Preview deployments are real Next.js apps — if env vars are missing, API routes fail on PR previews and you get false test results.

CI/CD — Automatic Deployments via Git

Connect your repository to Vercel (vercel.com → Import Project → select repo). After that:

Every push to main/master → production deployment (auto)
Every push to any other branch → preview deployment (auto)
Every PR → preview URL posted as a GitHub/GitLab comment (auto)

No manual deploys needed. The deploy pipeline runs your TypeScript build, checks for errors, and rolls back automatically if the build fails.

vercel.json — Deployment Config

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

Pre-Launch Deployment Checklist

✅ All env vars added to Vercel (Production AND Preview)
✅ Custom domain DNS configured (A record or CNAME pointing to Vercel)
✅ Domain aliased to latest production deployment
✅ next/image remotePatterns set for all external image hosts
✅ TypeScript build passes locally: npx tsc --noEmit
✅ No secrets in NEXT_PUBLIC_ vars or committed .env files
✅ Error boundaries wrap all critical routes
✅ generateMetadata added to key pages for SEO
✅ Performance check: Lighthouse score 90+ on production

Monitoring After Deploy

# View runtime logs for your production deployment
vercel logs <project-name>

# Inspect a specific deployment
vercel inspect <deployment-url>

# List all deployments
vercel ls <project-name>

Vercel also provides the Analytics and Speed Insights dashboards for real-user Core Web Vitals data — add @vercel/analytics and @vercel/speed-insights to your layout for automatic tracking.