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'.

Practice

1. What is the main purpose of using geolocation in a Next.js app with edge logic?

easy

A. To manage user authentication

B. To improve server-side rendering speed

C. To store user data securely

D. To customize content based on the user's location

Solution

1. Step 1: Understand geolocation usage

   Geolocation helps identify where a user is accessing the app from.

2. Step 2: Connect geolocation with edge logic

   Edge logic runs code near the user to customize responses quickly, often based on location.

3. Final Answer:

   To customize content based on the user's location -> Option D

4. Quick Check:

   Geolocation = Customize content [OK]

Hint: Geolocation customizes content by user location [OK]

Common Mistakes:

• Confusing geolocation with authentication
• Thinking geolocation improves rendering speed directly
• Assuming geolocation stores user data

2. Which of the following is the correct way to access the user's country code in Next.js middleware using edge logic?

easy

A. const country = request.geo.country

B. const country = request.location.countryCode

C. const country = request.headers['x-country']

D. const country = request.geoCode.country

Solution

1. Step 1: Recall Next.js middleware geo API

   Next.js provides a geo object on the request with location info.

2. Step 2: Identify correct property for country code

   The correct property is request.geo.country to get the country code.

3. Final Answer:

   const country = request.geo.country -> Option A

4. Quick Check:

   request.geo.country = country code [OK]

Hint: Use request.geo.country to get country code [OK]

Common Mistakes:

• Using incorrect property names like geoCode or location
• Trying to get country from headers without custom setup
• Confusing geo with location objects

3. Given this Next.js middleware code snippet, what will be the redirect URL if the user is from 'US'?

export function middleware(request) {
  const country = request.geo?.country || 'unknown';
  if (country === 'US') {
    return Response.redirect(new URL('/us-home', request.url));
  }
  return Response.next();
}

medium

A. /unknown

B. /home

C. /us-home

D. /

Solution

1. Step 1: Check country value from request

   The code sets country to request.geo?.country or 'unknown'. For a US user, it is 'US'.

2. Step 2: Analyze redirect condition

   If country is 'US', the middleware redirects to '/us-home'. Otherwise, it continues normally.

3. Final Answer:

   /us-home -> Option C

4. Quick Check:

   Country 'US' triggers redirect to /us-home [OK]

Hint: Country 'US' redirects to /us-home [OK]

Common Mistakes:

• Ignoring the redirect condition
• Assuming default path is used for US
• Confusing Response.next() with redirect

4. Identify the error in this Next.js middleware code that tries to redirect users from Canada to '/ca-home':

export function middleware(request) {
  const country = request.geo.country;
  if (country = 'CA') {
    return Response.redirect(new URL('/ca-home', request.url));
  }
  return Response.next();
}

medium

A. Missing optional chaining on request.geo

B. Using assignment '=' instead of comparison '===' in the if condition

C. Response.redirect should be Response.redirectTo

D. URL constructor is used incorrectly

Solution

1. Step 1: Check the if condition syntax

   The condition uses country = 'CA', which assigns 'CA' instead of comparing.

2. Step 2: Identify correct comparison operator

   It should use === to compare values, not =.

3. Final Answer:

   Using assignment '=' instead of comparison '===' in the if condition -> Option B

4. Quick Check:

   Use '===' for comparison, not '=' [OK]

Hint: Use '===' for comparison, not '=' [OK]

Common Mistakes:

• Confusing assignment and comparison operators
• Thinking Response.redirectTo exists
• Overlooking optional chaining necessity

5. You want to serve different homepage content for users from Europe and Asia using Next.js edge middleware. Which approach correctly implements this logic?

export function middleware(request) {
  const country = request.geo?.country || '';
  const europeCountries = ['FR', 'DE', 'IT'];
  const asiaCountries = ['JP', 'CN', 'IN'];

  if (europeCountries.includes(country)) {
    return Response.redirect(new URL('/eu-home', request.url));
  } else if (asiaCountries.includes(country)) {
    return Response.redirect(new URL('/asia-home', request.url));
  }
  return Response.next();
}

hard

A. This code correctly redirects European and Asian users to their homepages

B. The includes method cannot be used on arrays in middleware

C. The country variable should be fetched from request.headers instead

D. Response.redirect requires a status code as second argument

Solution

1. Step 1: Verify country detection and arrays

   The code safely gets country with optional chaining and defines arrays for Europe and Asia countries.

2. Step 2: Check redirect logic

   It uses includes to check membership and redirects accordingly, else continues normally.

3. Final Answer:

   This code correctly redirects European and Asian users to their homepages -> Option A

4. Quick Check:

   Array.includes works and redirects correctly [OK]

Hint: Use array.includes to check country and redirect [OK]

Common Mistakes:

• Thinking includes is not allowed in middleware
• Trying to get country from headers without setup
• Assuming Response.redirect needs status code