Geolocation and edge logic in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Next.js Edge Middleware handle geolocation-based redirects?

Given this Next.js Edge Middleware snippet, what will happen when a user from France visits the site?

import { NextResponse } from 'next/server';

export function middleware(request) {
  const country = request.geo?.country || 'US';
  if (country === 'FR') {
    return NextResponse.redirect(new URL('/fr', request.url));
  }
  return NextResponse.next();
}

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const country = request.geo?.country || 'US';
  if (country === 'FR') {
    return NextResponse.redirect(new URL('/fr', request.url));
  }
  return NextResponse.next();
}

A The user stays on the original page without redirect.

B The user is redirected to '/fr' path.

C The middleware throws an error because 'geo' is undefined.

D The user is redirected to '/us' path.

💡 Hint

Check how the country code is used to decide the redirect.

The middleware checks the user's country from request.geo. If it is 'FR', it redirects to '/fr'. Otherwise, it continues normally.

📝 Syntax

intermediate

Identify the syntax error in this Next.js Edge Middleware geolocation code

What is wrong with this middleware code snippet?

export function middleware(request) {
  const country = request.geo.country;
  if country === 'US' {
    return NextResponse.redirect('/us');
  }
  return NextResponse.next();
}

NextJS

export function middleware(request) {
  const country = request.geo.country;
  if (country === 'US') {
    return NextResponse.redirect('/us');
  }
  return NextResponse.next();
}

A Missing parentheses around the if condition.

B NextResponse.redirect requires a URL object, not a string.

C request.geo is not a valid property.

D The function must be async to use request.geo.

💡 Hint

Check the syntax of the if statement.

In JavaScript, the if statement requires parentheses around the condition: if (condition) { ... }

❓ state_output

advanced

What is the value of 'region' after this middleware runs for a user in California?

Consider this middleware code:

export function middleware(request) {
  const region = request.geo?.region || 'unknown';
  return new Response(region);
}

What will be the response body if the user is located in California, USA?

NextJS

export function middleware(request) {
  const region = request.geo?.region || 'unknown';
  return new Response(region);
}

A "CA"

B "California"

C "unknown"

D An empty string

💡 Hint

Check the format of the region property in request.geo.

The region property in request.geo returns the region code, e.g., 'CA' for California, not the full name.

🔧 Debug

advanced

Why does this Next.js Edge Middleware fail to redirect based on geolocation?

Review this middleware code:

import { NextResponse } from 'next/server';

export function middleware(request) {
  if (request.geo.country === 'DE') {
    return NextResponse.redirect(new URL('/de', request.url));
  }
  return NextResponse.next();
}

Users from Germany are not redirected. What is the likely cause?

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  if (request.geo.country === 'DE') {
    return NextResponse.redirect(new URL('/de', request.url));
  }
  return NextResponse.next();
}

A The middleware function must be async to access request.geo.

B request.geo.country is undefined because geo is not supported on Edge.

C The middleware is missing the 'config' export to specify matcher paths.

D NextResponse.redirect requires a full URL, not a path string.

💡 Hint

Check if the middleware runs on the expected routes.

Without specifying a matcher in the middleware config, the middleware may not run on any route, so no redirect happens.

🧠 Conceptual

expert

How does Next.js Edge Middleware geolocation data affect caching strategies?

You want to serve different content based on user country using Next.js Edge Middleware. Which statement about caching is correct?

A Caching is disabled automatically when using request.geo in middleware.

B You can cache the response globally without variation because geolocation is client-side.

C Next.js automatically creates separate cache entries per country without extra config.

D You must vary the cache by the 'x-vercel-ip-country' header to avoid serving wrong content.

💡 Hint

Think about how edge caches differentiate content by headers.

To serve country-specific content correctly, caches must vary by the header that carries geolocation info, like 'x-vercel-ip-country'.