Using Vercel Edge Middleware for Cookie‑Based Redirects

Problem

You want to send users to different versions of a page based on a cookie (e.g., experiment=variantA) without hitting your origin server and without changing the URL visible in the browser.

Thesis

Vercel Edge Middleware lets you run lightweight JavaScript/TypeScript at the global edge, inspect cookies, and return a redirect response that stays cached at the edge when you add appropriate Cache‑Control headers.

How Edge Middleware Works

Middleware files (middleware.ts or middleware.js) placed in the project root or under vercel/ are executed on every request before any caching or origin lookup. You receive a Request object, can read cookies, headers, or the URL, and return a Response (redirect, rewrite, or modified headers). Because the code runs on Vercel’s edge network, latency is typically sub‑millisecond.

Worked Example

Suppose you run an A/B test where a cookie named experiment determines which variant to show. The middleware reads the cookie and redirects to /variantA/home or /variantB/home while preserving the original path for logging.

1. Create the middleware file at the project root:

// middleware.ts
import { NextResponse } from 'next/server'

export function middleware(request) {
  const cookie = request.cookies.get('experiment')
  let variant = 'variantA'
  if (cookie) {
    variant = cookie.value === 'variantB' ? 'variantB' : 'variantA'
  }
  // Build the redirect URL keeping the original pathname
  const url = request.nextUrl.clone()
  url.pathname = `/${variant}${url.pathname}`
  // Return a 307 temporary redirect
  const response = NextResponse.redirect(url, 307)
  // Edge‑cache the redirect for 10 seconds (adjust as needed)
  response.headers.set('Cache-Control', 's-maxage=10, stale-while-revalidate=5')
  return response
}

2. Test locally with Vercel CLI:

# From your project root
vercel dev
# In another terminal, simulate a request with the cookie
curl -i -H "Cookie: experiment=variantB" http://localhost:3000/some-page

Expected output (check the headers):

HTTP/1.1 307 Temporary Redirect
location: /variantB/some-page
cache-control: s-maxage=10, stale-while-revalidate=5
...

3. Deploy to Vercel:

vercel --prod   # or push to your Git integration

After deployment, use curl or browser devtools to verify the redirect occurs without a request to your origin (you can confirm by checking Vercel logs for “Middleware executed”).

Trade‑offs and Limitations

• Added latency per request – Even lightweight middleware adds a few hundred microseconds. Heavy logic or large dependencies can increase cold‑start time and cost on Vercel Pro plans.
• Bypasses automatic caching – Because middleware runs before the edge cache, any redirect or rewrite that depends on mutable state (like a cookie) will not be cached unless you explicitly set Cache‑Control headers as shown.
• Middleware size limit – The bundled middleware must stay under Vercel’s edge function size limit (currently 1 MB). Importing large libraries may cause deployment failures.

Actionable Closing

Add a middleware.ts file that reads the relevant cookie, builds a redirect, and sets a short Cache‑Control header. Test locally with vercel dev and curl, then deploy and monitor Vercel logs to ensure the middleware runs and the redirect is cached as intended. If you notice increased latency or unexpected cache misses, simplify the middleware logic or adjust the Cache‑Control values.