Next.js Deploying to Vercel

Vercel is the company behind Next.js, and it provides the best hosting platform for Next.js apps. Deploying to Vercel takes a few minutes and gives you automatic HTTPS, global CDN distribution, instant rollbacks, and preview deployments for every pull request — all with a generous free tier.

What Vercel Does

YOU PUSH CODE TO GITHUB
          ↓
VERCEL DETECTS THE PUSH
          ↓
Vercel runs: npm run build
          ↓
Vercel deploys to its global network (40+ data centers)
          ↓
Your site is live at https://your-app.vercel.app
          ↓
Every future push triggers the same process automatically

Step 1: Push Your Code to GitHub

Vercel deploys from Git repositories. Create a repository on GitHub and push your Next.js project.

# In your project folder:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main

Step 2: Connect Vercel to GitHub

Go to vercel.com and sign up with your GitHub account. Click "Add New Project," then choose your repository from the list. Vercel automatically detects that it is a Next.js project and sets the correct build settings.

VERCEL PROJECT SETUP SCREEN:
Framework Preset: Next.js          ← Auto-detected
Build Command:    npm run build    ← Auto-filled
Output Directory: .next            ← Auto-filled
Install Command:  npm install      ← Auto-filled

You do not need to change any of these.

Step 3: Add Environment Variables

Before deploying, add your environment variables in the Vercel project settings. Go to Settings → Environment Variables and add each key-value pair from your .env.local file.

VERCEL ENVIRONMENT VARIABLES PANEL:
Name              Value                         Environment
──────────────────────────────────────────────────────────────
DATABASE_URL      mongodb+srv://user:pass@...   Production
NEXTAUTH_SECRET   your-secret-key-here          Production, Preview
GITHUB_CLIENT_ID  Iv1.abc123                    Production, Preview
API_KEY           sk-xyz789                     Production

Set environment variables to "Production" for your live site, "Preview" for pull request deployments, and "Development" for local testing through the Vercel CLI.

Step 4: Deploy

Click "Deploy." Vercel runs your build and publishes the site. The first deployment takes about 1 to 3 minutes. You get a URL like https://your-app.vercel.app immediately.

Automatic Deployments

After the initial setup, every push to your main branch triggers a new deployment automatically. You never manually deploy again.

MAIN BRANCH WORKFLOW:
git add .
git commit -m "Fixed the login bug"
git push origin main

→ Vercel detects push
→ Builds and deploys automatically
→ Live site updated in ~1 minute

Preview Deployments

When you push to any branch other than main, Vercel creates a separate preview URL. Your team can review the changes at that URL before merging to production. The live site is unaffected.

BRANCH WORKFLOW:
git checkout -b fix/login-button
git commit -m "Fix login button color"
git push origin fix/login-button

→ Vercel builds a preview
→ URL: https://your-app-fix-login-button.vercel.app
→ Team reviews, approves pull request
→ Merge to main → Production deploys

Adding a Custom Domain

In your Vercel project settings, go to Domains and add your custom domain. Vercel gives you DNS records to add at your domain registrar (GoDaddy, Namecheap, Cloudflare, etc.). After DNS propagates, your site lives at your custom domain with HTTPS automatically configured.

DOMAIN SETUP STEPS:
1. Vercel Dashboard → Project → Settings → Domains
2. Type: yoursite.com → Click Add
3. Vercel shows: Add these DNS records at your registrar
   A record: 76.76.21.21
   CNAME: cname.vercel-dns.com
4. Add records at your registrar
5. Wait 10-60 minutes for DNS to propagate
6. yoursite.com is live with HTTPS ✓

Vercel Analytics and Performance

Vercel provides built-in analytics that measure your Core Web Vitals — the metrics Google uses to evaluate page experience. Enable them in the dashboard with one click.

CORE WEB VITALS TRACKED:
LCP  (Largest Contentful Paint)  → How fast the main content loads
FID  (First Input Delay)         → How fast the page responds to clicks
CLS  (Cumulative Layout Shift)   → How stable the layout is during load
TTFB (Time to First Byte)        → How fast the server responds

Rollbacks

Every deployment is saved in Vercel. If a new deployment breaks something, roll back to any previous version instantly from the Vercel dashboard with a single click. The site reverts to the previous version in seconds.

DEPLOYMENT HISTORY IN VERCEL:
● v10 - 2 hours ago   ← Current (broken)
● v9  - 1 day ago     ← Click "Promote to Production"
● v8  - 3 days ago
● v7  - 1 week ago

Click "Promote to Production" on v9 → Site reverts instantly

Vercel Pricing

HOBBY (Free):
  ✓ Unlimited projects
  ✓ 100GB bandwidth per month
  ✓ Preview deployments
  ✓ Vercel.app domain
  ✗ Commercial use limited

PRO ($20/month per member):
  ✓ Commercial use
  ✓ More bandwidth, build minutes
  ✓ Password protection for previews
  ✓ Team collaboration features

Key Takeaway

Deploying to Vercel takes three steps: push your code to GitHub, connect the repository to Vercel, and add your environment variables. Every push to the main branch deploys automatically. Preview deployments let your team review changes before they go live. Custom domains, HTTPS, analytics, and instant rollbacks come included. Vercel is purpose-built for Next.js and provides the smoothest deployment experience available.

Previous lessons
Back to courses
Next lessons

Leave a Comment