Unlocking Global Performance: Mastering Edge Functions with Next.js and Vercel

+-------------------------------------------------------------------------------+
|                    Centralized Origin vs. Global Edge Runtime                 |
+-------------------------------------------------------------------------------+
| Centralized Origin (us-east-1):                                               |
| User in Tokyo ---> 180ms Network RTT ---> Single Origin Server (Virginia)    |
| (High latency, sluggish initial paint, centralized load contention)           |
|                                                                               |
| Global Edge Functions (Vercel Edge):                                          |
| User in Tokyo ════> 8ms Network RTT ════> Local Tokyo Edge PoP (V8 Isolate)   |
| User in London ═══> 6ms Network RTT ════> Local London Edge PoP (V8 Isolate)  |
+-------------------------------------------------------------------------------+

graph TD
    UserAsia([User in Tokyo]) -->|8ms| EdgeTokyo[Edge PoP: Tokyo HND]
    UserEU([User in Frankfurt]) -->|6ms| EdgeFRA[Edge PoP: Frankfurt FRA]
    UserUS([User in New York]) -->|4ms| EdgeNYC[Edge PoP: New York EWR]
    
    subgraph Vercel Global Edge Network
        EdgeTokyo --> Auth[Edge JWT Auth & Geo Routing]
        EdgeFRA --> Auth
        EdgeNYC --> Auth
    end
    
    Auth -->|Cache Hit| ReturnFast[Instant Sub-10ms Response]
    Auth -->|Cache Miss / Mutation| DB[(Serverless Postgres: Neon / Upstash)]

+-------------------------------------------------------------------------------+
| Characteristic      | Edge Runtime (V8 Isolates) | Node.js Serverless         |
+---------------------+----------------------------+----------------------------+
| Cold Start          | ~0 ms (Sub-millisecond)    | 150ms – 1,200ms            |
| Architecture        | Shared V8 Isolate Pool     | Dedicated MicroVM Container|
| Execution Limit     | 25ms – 50ms CPU Time       | 15 minutes max             |
| Memory Cap          | 128 MB                     | Up to 10,240 MB            |
| Available APIs      | Web Standards (fetch, WebCrypto)| Full Node.js (`fs`, `net`, `child_process`)|
| Primary Use Case    | Auth, Geo-routing, A/B tests| Heavy DB reporting, PDF gen|
+-------------------------------------------------------------------------------+

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

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

export function middleware(request: NextRequest) {
  // 1. Extract Geolocation from Vercel Edge Headers
  const country = request.geo?.country || 'US';
  const city = request.geo?.city || 'Unknown';

  const response = NextResponse.next();

  // 2. Pass Geo context downstream via response headers
  response.headers.set('x-user-country', country);
  response.headers.set('x-user-city', city);

  // 3. Dynamic Currency / Localization Routing
  const url = request.nextUrl.clone();

  // Redirect European users to Euro pricing catalog if on root
  if (url.pathname === '/catalog' && country === 'DE') {
    url.pathname = '/catalog/eu';
    return NextResponse.rewrite(url);
  }

  return response;
}

// middleware.ts (Edge A/B Testing)
import { NextRequest, NextResponse } from 'next/server';

const EXPERIMENT_COOKIE = 'ab_hero_variant';

export function middleware(request: NextRequest) {
  let variant = request.cookies.get(EXPERIMENT_COOKIE)?.value;

  // If user has no experiment cookie, assign deterministically
  if (!variant) {
    variant = Math.random() < 0.5 ? 'control' : 'experimental';
  }

  const url = request.nextUrl.clone();
  if (url.pathname === '/landing') {
    url.pathname = `/landing/${variant}`;
    const response = NextResponse.rewrite(url);

    // Persist assignment for 30 days
    response.cookies.set(EXPERIMENT_COOKIE, variant, {
      maxAge: 60 * 60 * 24 * 30,
      path: '/',
      httpOnly: true,
      sameSite: 'lax',
    });

    return response;
  }

  return NextResponse.next();
}

// app/api/price/route.ts
import { NextRequest, NextResponse } from 'next/server';

// Explicitly declare Edge Runtime
export const runtime = 'edge';

export async function GET(request: NextRequest) {
  const currency = request.nextUrl.searchParams.get('currency') || 'USD';

  // Perform sub-millisecond crypto calculation or read from Upstash Edge Redis
  const rates: Record<string, number> = {
    USD: 1.0,
    EUR: 0.92,
    GBP: 0.78,
    JPY: 155.4,
  };

  const exchangeRate = rates[currency.toUpperCase()] || 1.0;

  return NextResponse.json(
    {
      baseCurrency: 'USD',
      targetCurrency: currency.toUpperCase(),
      rate: exchangeRate,
      timestamp: new Date().toISOString(),
      servedFromRegion: process.env.VERCEL_REGION || 'edge-local',
    },
    {
      status: 200,
      headers: {
        'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600',
      },
    }
  );
}