Geolocation and edge logic in NextJS - Mini Project: Build & Apply

Geolocation and Edge Logic with Next.js

📖 Scenario: You are building a Next.js app that shows a personalized greeting based on the user's location. The app uses edge logic to detect the user's country from the request headers and displays a message accordingly.

🎯 Goal: Create a Next.js edge component that reads the user's country from the request headers and renders a greeting message based on the country code.

📋 What You'll Learn

Use Next.js App Router with a server component

Use edge runtime for the page

Read the x-vercel-ip-country header from the request

Create a config variable for supported countries

Render a greeting message based on the country code

Fallback to a default message if the country is not supported

💡 Why This Matters

🌍 Real World

Many websites personalize content based on user location to improve user experience and comply with regional laws.

💼 Career

Understanding edge runtime and geolocation is valuable for building fast, personalized web apps in modern frameworks like Next.js.

1

Create the Next.js page component

Create a new file called page.tsx inside the app directory. Inside it, create a default exported async function called Page that returns a simple <div> with the text "Loading location...".

NextJS

// Your code here

Hint

This is the basic structure of a Next.js server component page.

2

Add edge runtime and supported countries config

Add the line export const runtime = 'edge'; at the top of page.tsx to enable edge runtime. Then create a constant called supportedCountries as an array with the values 'US', 'CA', and 'GB'.

NextJS

export default async function Page() {
  return Loading location...;
}
// Your code here

Hint

The runtime export tells Next.js to run this page at the edge.

3

Read country from request headers and apply logic

Inside the Page function, get the headers from the Request object by calling headers(). Then get the country code from the header 'x-vercel-ip-country' and store it in a variable called country. Use a conditional to check if country is included in supportedCountries. If yes, set a variable message to `Hello from ${country}!`. Otherwise, set message to 'Hello from somewhere!' . Finally, return a <div> that displays the message.

NextJS

export const runtime = 'edge';

const supportedCountries = ['US', 'CA', 'GB'];

export default async function Page() {
  // Your code here
}

Hint

Use headers() from next/headers to access request headers in edge runtime.

4

Add accessibility and semantic HTML

Wrap the greeting message inside a <main> element with an aria-label attribute set to "User location greeting". Replace the <div> with this <main> element that contains the message inside a <p> tag.

NextJS

import { headers } from 'next/headers';

export const runtime = 'edge';

const supportedCountries = ['US', 'CA', 'GB'];

export default async function Page() {
  const headersList = headers();
  const country = headersList.get('x-vercel-ip-country') ?? '';
  
  let message = 'Hello from somewhere!';
  if (supportedCountries.includes(country)) {
    message = `Hello from ${country}!`;
  }

  // Your code here
}

Hint

Use semantic HTML and add aria-label for accessibility.

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