Deploying to Vercel: Step-by-Step Guide

Deploying to Vercel: Step-by-Step Guide

Vercel makes deployment so easy it almost feels like cheating. Connect GitHub, push code, done. Here's how to get started.

---

What is Vercel?

Vercel is a deployment platform optimized for frontend frameworks. They created Next.js, so it works particularly well with it.

What You Get Free

• Unlimited personal projects

• 100GB bandwidth/month

• Automatic HTTPS

• Global CDN

• Preview deployments for every branch

• Serverless functions

• Edge functions

• Analytics (basic)

---

Prerequisites

You'll need:

1. A GitHub account

2. A project to deploy (Next.js, React, Vue, static site, etc.)

3. That's it

---

Step 1: Prepare Your Project

Push to GitHub

If you haven't already:

In your project folder
git init
git add .
git commit -m "Initial commit"

Create repo on GitHub, then:
git remote add origin https://github.com/username/my-project.git
git push -u origin main

Verify Build Works

Test locally:

npm run build

Fix any errors before deploying.

---

Step 2: Create Vercel Account

1. Go to vercel.com

2. Click "Sign Up"

3. Choose "Continue with GitHub"

4. Authorize Vercel

---

Step 3: Import Project

1. Click "Add New..." → "Project"

2. Find your GitHub repository

3. Click "Import"

Configure Project

Vercel auto-detects frameworks. Usually default settings work.

Setting

What It Does

Framework Preset

Auto-detected (Next.js, React, etc.)

Root Directory

Leave blank unless code is in subfolder

Build Command

npm run build (usually auto-detected)

Output Directory

.next for Next.js, dist or build for others

Add Environment Variables

If your project needs env vars:

1. Expand "Environment Variables"

2. Add each variable (key + value)

3. Keep default: all environments

Deploy

Click "Deploy". Watch the build logs.

---

Step 4: Wait for Build

Vercel:

1. Clones your repo

2. Installs dependencies

3. Runs build command

4. Deploys to global CDN

Typical time: 30-90 seconds.

Build Logs

Watch for:

• ✅ Green checkmarks = success

• ❌ Red = error (read the message)

---

Step 5: Visit Your Site

After successful deploy:

• Vercel gives you a URL: project-name.vercel.app

• Click to visit your live site

🎉 You're deployed!

---

Adding Custom Domain

In Vercel Dashboard

1. Go to your project

2. Settings → Domains

3. Enter your domain (e.g., mysite.com)

4. Click Add

Configure DNS

Vercel shows you what records to add.

Option A: Using Vercel Nameservers (Recommended)

Update nameservers at your registrar to:

ns1.vercel-dns.com
ns2.vercel-dns.com

Option B: Using A/CNAME records

Type

Name

Value

A

@

76.76.21.21

CNAME

www

cname.vercel-dns.com

Wait for Propagation

• Usually 5-30 minutes

• Can take up to 48 hours

• SSL certificate issued automatically

---

Preview Deployments

Every push to a branch (not main) gets a preview URL:

1. Create branch: git checkout -b feature/new-header

2. Push: git push origin feature/new-header

3. Vercel creates: feature-new-header-username.vercel.app

Benefits

• Test changes before merging

• Share with team for review

• Each PR has its own preview

---

Environment Variables Per Environment

Production vs Preview

Sometimes you want different values:

1. Project Settings → Environment Variables

2. Add variable

3. Select environments:

- ☑️ Production

- ☑️ Preview

- ☐ Development

Example:

Variable: NEXT_PUBLIC_API_URL
Production: https://api.mysite.com
Preview: https://staging-api.mysite.com

---

Automatic Deployments

How It Works

Push to GitHub → Vercel builds → Site updates

Branch

Result

main / master

Production deployment

Other branches

Preview deployment

Skip Deployments

Add to commit message:

git commit -m "Update README [skip ci]"

Or configure ignored paths in vercel.json:

{
  "ignoreCommand": "git diff HEAD^ HEAD --quiet -- . ':!*.md'"
}

---

Rollback

Made a mistake? Roll back instantly.

1. Go to project → Deployments

2. Find previous working deployment

3. Click ⋮ → "Promote to Production"

The previous version is live immediately.

---

Build Settings

vercel.json

Configure build behavior:

{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  "regions": ["iad1", "sfo1"]
}

Redirects

{
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ]
}

Headers

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        }
      ]
    }
  ]
}

---

Monorepos

If your project is in a subfolder:

1. Project Settings → General

2. Root Directory: apps/web (or your path)

Or use vercel.json:

{
  "rootDirectory": "apps/web"
}

---

Troubleshooting

Build Fails

1. Check build logs for error message

2. Verify it builds locally: npm run build

3. Check environment variables are set

4. Check Node.js version matches

Site Shows Old Content

1. Force rebuild: Deployments → Redeploy

2. Check if latest commit triggered build

3. Clear browser cache

404 on Routes

For Next.js, usually works automatically. For other frameworks, may need:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

Environment Variable Not Working

1. Make sure it's set in Vercel dashboard

2. Redeploy after adding variables

3. Remember: non-NEXT_PUBLIC_ vars only work server-side

---

Vercel CLI

Deploy from command line:

Install
npm i -g vercel

Login
vercel login

Deploy (creates preview)
vercel

Deploy to production
vercel --prod

Link existing project
vercel link

---

Pricing

Free (Hobby)

• Personal use

• Unlimited projects

• 100GB bandwidth

• 100GB-hours function execution

Pro ($20/month)

• Team features

• 1TB bandwidth

• Password protection

• More analytics

Enterprise

• Custom limits

• SSO

• Support SLA

Most personal sites never need paid.

---

Comparison

Feature

Vercel

Netlify

CloudFlare

Free tier

Generous

Generous

Very generous

Next.js support

Best

Good

Good

Edge functions

Yes

Yes

Yes

Ease of use

⭐⭐⭐⭐⭐

⭐⭐⭐⭐⭐

⭐⭐⭐⭐

Free bandwidth

100GB

100GB

Unlimited

See our detailed hosting comparison →

---

Conclusion

Deploying to Vercel:

1. Push to GitHub - Your code in a repo

2. Connect Vercel - Import project

3. Add env vars - If needed

4. Deploy - One click

5. Custom domain - Add and configure DNS

After initial setup, every push automatically deploys. Preview URLs for branches. Instant rollback if something breaks.

It really is that simple.

Related guides:

• Vercel vs Netlify vs Cloudflare Pages

• WordPress to Next.js Migration Guide

• Build a Blog with Next.js and MDX

Build something to deploy →