How to configure geo routing with middleware on Vercel

In your project root, create a middleware.js or middleware.ts file. This file will intercept all incoming requests before they reach your pages.

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

export function middleware(request) {
  // Middleware logic will go here
}

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

Use Vercel's built-in geo headers to detect user location. The request.geo object contains country, region, and city information.

export function middleware(request) {
  const country = request.geo?.country || 'US'
  const region = request.geo?.region
  const city = request.geo?.city
  
  console.log(`User from: ${city}, ${region}, ${country}`)
}

Create routing logic based on country codes. Set up redirects or rewrites for different geographical regions.

export function middleware(request) {
  const country = request.geo?.country || 'US'
  const { pathname } = request.nextUrl
  
  // Skip if already on a geo-specific path
  if (pathname.startsWith('/us') || pathname.startsWith('/eu') || pathname.startsWith('/asia')) {
    return NextResponse.next()
  }
  
  // Define country-to-region mapping
  const euCountries = ['DE', 'FR', 'IT', 'ES', 'NL', 'GB']
  const asiaCountries = ['JP', 'CN', 'IN', 'SG', 'KR']
  
  if (euCountries.includes(country)) {
    return NextResponse.redirect(new URL(`/eu${pathname}`, request.url))
  } else if (asiaCountries.includes(country)) {
    return NextResponse.redirect(new URL(`/asia${pathname}`, request.url))
  }
  
  // Default to US
  return NextResponse.redirect(new URL(`/us${pathname}`, request.url))
}

Combine geo routing with language detection from the Accept-Language header for more sophisticated routing.

export function middleware(request) {
  const country = request.geo?.country || 'US'
  const acceptLanguage = request.headers.get('accept-language') || ''
  const { pathname } = request.nextUrl
  
  // Extract preferred language
  const preferredLang = acceptLanguage.split(',')[0]?.split('-')[0] || 'en'
  
  // Route based on country and language
  if (country === 'DE') {
    const lang = preferredLang === 'de' ? 'de' : 'en'
    return NextResponse.redirect(new URL(`/${lang}/de${pathname}`, request.url))
  }
  
  // Add similar logic for other countries
}

Organize your pages directory to match your routing structure. Create folders for each geographical region.

pages/
├── us/
│   ├── index.js
│   └── about.js
├── eu/
│   ├── index.js
│   └── about.js
├── asia/
│   ├── index.js
│   └── about.js
└── index.js (fallback)

Each regional page can contain location-specific content, pricing, or features.

Implement a way for users to override geo routing using URL parameters or cookies for testing and user preference.

export function middleware(request) {
  const { searchParams, pathname } = request.nextUrl
  const country = request.geo?.country || 'US'
  
  // Check for region override
  const regionOverride = searchParams.get('region')
  const cookieRegion = request.cookies.get('preferred-region')?.value
  
  if (regionOverride && ['us', 'eu', 'asia'].includes(regionOverride)) {
    const response = NextResponse.redirect(new URL(`/${regionOverride}${pathname}`, request.url))
    response.cookies.set('preferred-region', regionOverride, { maxAge: 86400 * 30 })
    return response
  }
  
  if (cookieRegion) {
    return NextResponse.redirect(new URL(`/${cookieRegion}${pathname}`, request.url))
  }
  
  // Continue with geo-based routing
}

Deploy your changes to Vercel and test geo routing functionality. Use Vercel's Edge Network to verify routing from different locations.

Test using:

• Vercel CLI: vercel dev for local testing
• Browser DevTools: Override headers in Network tab
• VPN services: Test from different geographical locations
• Vercel Edge Functions: Check logs in dashboard

Monitor the Functions tab in your Vercel dashboard to see middleware execution logs.