Vercel

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.

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)

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