Vercel

Vercel is a platform that puts your website on the internet. Connect your code from GitHub, and Vercel handles everything else—your site goes live automatically.

What Problem Does It Solve?

Traditionally, putting a website online meant renting a server, installing software, configuring security, and manually uploading files. Vercel eliminates all of that. You push code to GitHub, and seconds later your site is live worldwide.

The Basics

Deployment — Your code becomes a live website
Preview URL — Each change gets a unique test link
Production — Your main live site (your-domain.com)
Serverless Functions — Backend code that runs without a server

How It Works

Create a GitHub repository with your website code
Import that repo into Vercel (one-time setup)
Every time you push to GitHub, Vercel auto-deploys

What Can You Host?

Static websites (HTML, CSS, JavaScript)
React, Vue, Svelte applications
Next.js apps (Vercel created Next.js)
API endpoints and backend functions

Why Vercel?

It's free for personal projects, incredibly fast (global CDN), and the deployment experience is unmatched. Push code → see it live in seconds.

Beyond basic hosting, Vercel offers serverless functions, environment variables, custom domains, and powerful integrations that enable full-stack applications.

Serverless Functions

Put JavaScript files in the /api folder, and they become API endpoints:

// api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World' });
}

Accessible at yoursite.com/api/hello. No server to manage—it scales automatically.

Environment Variables

Store secrets securely in the Vercel dashboard:

Development — Used locally (download via CLI)
Preview — Used in preview deployments
Production — Used on your live site

// Access in your code
const apiKey = process.env.OPENAI_API_KEY;

Vercel CLI

npm i -g vercel        # Install globally
vercel                 # Deploy from terminal
vercel dev             # Run locally with env vars
vercel env pull        # Download env vars to .env.local

Preview Deployments

Every branch and pull request gets its own URL. This lets you:

Test changes before merging
Share work-in-progress with teammates
Run visual regression tests

Custom Domains

Add your domain in the Vercel dashboard. Point your DNS to Vercel's servers, and they handle SSL certificates automatically. Renewals, security, everything.

Integrations

Vercel KV — Redis-compatible key-value storage
Vercel Postgres — Serverless SQL database
Vercel Blob — File storage
Analytics — Real user monitoring and Web Vitals

Advanced Vercel usage involves edge functions, fine-tuned caching, monorepo support, and deep configuration that squeezes every millisecond of performance.

Edge Functions

Run code at the edge (closest to the user) instead of a single region:

// api/edge-hello.js
export const config = {
  runtime: 'edge',
};

export default function handler(req) {
  return new Response('Hello from the edge!');
}

Edge functions start in ~1ms vs ~250ms for regular serverless. Perfect for auth checks, A/B testing, and personalization.

Pro Tip

Use Edge for anything that doesn't need Node.js APIs. The cold start difference is dramatic for user experience.

vercel.json Configuration

{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "s-maxage=60" }
      ]
    }
  ],
  "redirects": [
    { "source": "/old", "destination": "/new", "permanent": true }
  ],
  "rewrites": [
    { "source": "/blog/:slug", "destination": "/api/blog?slug=:slug" }
  ],
  "functions": {
    "api/heavy.js": {
      "memory": 3008,
      "maxDuration": 60
    }
  }
}

Caching Strategies

s-maxage=31536000, immutable — Cache forever (for hashed assets)
s-maxage=60, stale-while-revalidate=300 — Cache 1 min, serve stale for 5 min while revalidating
private, no-cache, no-store — Never cache (user-specific data)

Performance Secret

stale-while-revalidate is the key to both speed and freshness. Users get cached content instantly while fresh data loads in the background.

Monorepo Support

Deploy multiple apps from one repo:

{
  "buildCommand": "cd packages/web && npm run build",
  "outputDirectory": "packages/web/dist",
  "installCommand": "npm install --prefix packages/web"
}

Build Optimization

Ignored Build Step — Skip builds when only docs change:

// vercel.json
{
  "ignoreCommand": "git diff HEAD^ HEAD --quiet -- ./src"
}

Advanced CLI Commands

vercel logs yoursite.com          # Stream production logs
vercel inspect deployment-url     # Debug a deployment
vercel rollback                   # Revert to previous deployment
vercel promote deployment-url     # Promote preview to production
vercel alias set deployment custom.com  # Custom domain for specific deploy

Hidden Features

Deployment Protection — Password-protect preview deployments
Speed Insights — Real user performance metrics
Checks — Custom deployment validation (integration tests, etc.)
Draft Mode — Preview CMS content before publishing
Incremental Static Regeneration — Update static pages without rebuilding

Cost Optimization

Use Edge Functions where possible (10x cheaper than serverless)
Set aggressive caching headers
Use stale-while-revalidate to reduce function invocations
Monitor with vercel analytics to identify expensive routes