Vercel vs. Netlify — Core Concepts

How Git-Based Deployment Works

Both platforms connect to your GitHub (or GitLab/Bitbucket) repository and deploy automatically on every push:

git push origin main
  → Platform detects the push via webhook
  → Pulls your code
  → Runs your build command (e.g., npm run build)
  → Deploys the output to a global CDN
  → Updates your live URL

The entire process takes 30–90 seconds for most React apps. No SSH, no servers, no Nginx config.

Preview Deployments

Every pull request gets its own live preview URL — a fully functional deployment of that branch:

main branch   → https://yourapp.com             (production)
feature/login → https://yourapp-git-feature-login-yourteam.vercel.app  (preview)

This is one of the most valuable features of both platforms. You can share a preview link in a PR review, test the exact build that will go to production, and catch issues before merging.

Setting Up on Vercel

1. Go to vercel.com and sign in with GitHub
2. Click Add New → Project
3. Import your repository
4. Vercel auto-detects the framework (Next.js, React, Vue, etc.)
5. Set the build command and output directory if needed
6. Click Deploy

Auto-detected settings for common frameworks:

Framework	Build Command	Output Directory
Next.js	next build	.next
React (CRA)	react-scripts build	build
Vite	vite build	dist
Vue CLI	vue-cli-service build	dist
Gatsby	gatsby build	public

Setting Up on Netlify

1. Go to netlify.com and sign in with GitHub
2. Click Add new site → Import an existing project
3. Choose your repository
4. Configure build settings
5. Click Deploy site

Netlify's flow is nearly identical to Vercel's.

Environment Variables

Both platforms let you set environment variables per environment (production, preview, development):

Vercel:

• Project Settings → Environment Variables
• Variables can be scoped to Production, Preview, or Development

Netlify:

• Site configuration → Environment variables
• Same scoping options

# Set in the dashboard, referenced in your code:
process.env.NEXT_PUBLIC_API_URL   # exposed to the browser (Vercel)
process.env.API_SECRET_KEY        # server-side only

Important: Variables prefixed with NEXT_PUBLIC_ (Next.js) or VITE_ (Vite) are bundled into the client-side JavaScript. Never prefix secret keys.

Custom Domains

Vercel:

1. Project → Settings → Domains → Add domain
2. Follow the instructions to add DNS records (CNAME or A record)
3. SSL is provisioned automatically

Netlify:

1. Site configuration → Domain management → Add domain alias
2. Add the required DNS records
3. SSL provisioned automatically via Let's Encrypt

Both platforms handle SSL automatically — no Certbot needed.

Serverless Functions

Both platforms let you add backend logic without a separate server:

Vercel (API Routes in Next.js):

// app/api/hello/route.js
export async function GET(request) {
  return Response.json({ message: 'Hello from Vercel!' });
}

Netlify Functions:

// netlify/functions/hello.js
export const handler = async (event) => ({
  statusCode: 200,
  body: JSON.stringify({ message: 'Hello from Netlify!' }),
});

These run as serverless functions (Lambda under the hood on Netlify) — no always-on server required.

When to Choose Which

Choose Vercel when:

• You're building a Next.js app — Vercel built Next.js; SSR, ISR, and edge features work best on Vercel
• You want the most polished deployment experience
• You need edge functions with low latency globally

Choose Netlify when:

• You have a non-Next.js static site (Gatsby, Hugo, plain HTML)
• You need Netlify-specific features: form handling, identity (auth), split testing
• You prefer Netlify's slightly more generous free tier for teams