How would you implement geo-based routing (serve different content by country) using middleware?

Question

Accepted Answer

Geo-based routing is one of the most powerful use cases for Next.js Middleware. Because middleware runs at the Edge — physically close to the user — it can detect the user's location and make routing decisions with near-zero latency. The key distinction is between a rewrite (URL stays the same, different content served) and a redirect (URL changes to country-specific URL). Most production apps use rewrites for seamless UX and redirects for explicit locale routing. request.geo.country — ISO 3166-1 alpha-2 country code (e.g. 'US', 'GB', 'DE') request.geo.region  — region/state code (e.g. 'CA' for California) request.geo.city    — city name (e.g. 'San Francisco') request.geo.latitude  — latitude coordinate request.geo.longitude — longitude coordinate request.ip — user IP address (for manual geolocation lookup) geo data is provided by Vercel automatically — self-hosted needs manual IP lookup // middleware.js
// ✅ URL stays the same — content changes based on country
import { NextResponse } from 'next/server'

const SUPPORTED_COUNTRIES = ['us', 'gb', 'de', 'fr', 'au', 'ca']
const DEFAULT_COUNTRY     = 'us'

export function middleware(request) {
  const { pathname } = request.nextUrl

// ✅ Get country from Vercel geo headers
  const country = (
    request.geo?.country ??
    request.headers.get('x-vercel-ip-country') ??
    DEFAULT_COUNTRY
  ).toLowerCase()

const resolvedCountry = SUPPORTED_COUNTRIES.includes(country)
    ? country
    : DEFAULT_COUNTRY

// ✅ Rewrite /pricing to /pricing/us or /pricing/gb etc.
  // Browser URL stays: /pricing
  // Next.js renders:   /pricing/us
  if (pathname === '/pricing') {
    return NextResponse.rewrite(
      new URL(`/pricing/${resolvedCountry}`, request.url)
    )
  }

// ✅ Rewrite /home to country-specific home
  if (pathname === '/') {
    return NextResponse.rewrite(
      new URL(`/home/${resolvedCountry}`, request.url)
    )
  }

return NextResponse.next()
}

export const config = {
  matcher: ['/', '/pricing']
} // middleware.js
// ✅ Redirect to explicit country URL — good for SEO and shareability
import { NextResponse } from 'next/server'

const COUNTRY_CONFIG = {
  GB: { path: '/en-gb', currency: 'GBP', language: 'en' },
  DE: { path: '/de',    currency: 'EUR', language: 'de' },
  FR: { path: '/fr',    currency: 'EUR', language: 'fr' },
  AU: { path: '/en-au', currency: 'AUD', language: 'en' },
  CA: { path: '/en-ca', currency: 'CAD', language: 'en' },
  US: { path: '/en-us', currency: 'USD', language: 'en' }
}

const DEFAULT_CONFIG = COUNTRY_CONFIG.US

export function middleware(request) {
  const { pathname } = request.nextUrl
  const country = request.geo?.country ?? 'US'

// Skip if already on a country path
  const isCountryPath = Object.values(COUNTRY_CONFIG)
    .some(c => pathname.startsWith(c.path))
  if (isCountryPath) return NextResponse.next()

// Skip non-page routes
  if (
    pathname.startsWith('/api') ||
    pathname.startsWith('/_next')
  ) return NextResponse.next()

const config = COUNTRY_CONFIG[country] ?? DEFAULT_CONFIG

// ✅ Redirect to country-specific URL
  // /products → /en-gb/products (for UK users)
  // /products → /de/products (for German users)
  const countryUrl = new URL(
    `${config.path}${pathname}`,
    request.url
  )

const response = NextResponse.redirect(countryUrl)

// ✅ Set cookie to remember country preference
  response.cookies.set('country',  country,         { maxAge: 86400 * 30 })
  response.cookies.set('currency', config.currency, { maxAge: 86400 * 30 })

return response
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'] 
} // middleware.js
// ✅ Allow users to manually override geo detection
import { NextResponse } from 'next/server'

const SUPPORTED_COUNTRIES = ['us', 'gb', 'de', 'fr', 'au']
const DEFAULT_COUNTRY     = 'us'

function resolveCountry(request) {
  // ✅ Priority 1 — user manually selected a country (stored in cookie)
  const cookieCountry = request.cookies.get('preferred-country')?.value
  if (cookieCountry && SUPPORTED_COUNTRIES.includes(cookieCountry)) {
    return cookieCountry
  }

// ✅ Priority 2 — URL has explicit country prefix
  const pathname = request.nextUrl.pathname
  const urlCountry = pathname.split('/')[1]
  if (SUPPORTED_COUNTRIES.includes(urlCountry)) {
    return urlCountry
  }

// ✅ Priority 3 — Geo detection
  const geoCountry = (
    request.geo?.country ??
    request.headers.get('x-vercel-ip-country') ??
    DEFAULT_COUNTRY
  ).toLowerCase()

return SUPPORTED_COUNTRIES.includes(geoCountry)
    ? geoCountry
    : DEFAULT_COUNTRY
}

export function middleware(request) {
  const country  = resolveCountry(request)
  const response = NextResponse.next()

// ✅ Inject country into request header for use in Server Components
  const requestHeaders = new Headers(request.headers)
  requestHeaders.set('x-country', country)

return NextResponse.next({
    request: { headers: requestHeaders }
  })
}

// Reading in a Ser

How would you implement geo-based routing (serve different content by country) using middleware?

How would you implement geo-based routing (serve different content by country) using middleware?

Scenario Questions

Follow-up Questions