Geolocation and edge logic in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js geolocation hook.

NextJS

import { [1] } from 'next/navigation';

Drag options to blanks, or click blank then click option'

AuseGeolocation

BuseRouter

CusePathname

DuseSearchParams

Attempts:

3 left

💡 Hint

Common Mistakes

Using useRouter instead of useGeolocation.

Importing from 'next/router' instead of 'next/navigation'.

The useGeolocation hook is used to access geolocation data in Next.js edge components.

2fill in blank

medium

Complete the code to get the user's current position inside a React component.

NextJS

const position = [1]();

Drag options to blanks, or click blank then click option'

AuseGeolocation

BuseRouter

CuseState

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState or useEffect instead of useGeolocation.

Trying to call useRouter to get position.

The useGeolocation hook returns the user's current position in Next.js edge components.

3fill in blank

hard

Fix the error in the edge function export to enable geolocation support.

NextJS

export const runtime = [1];

Drag options to blanks, or click blank then click option'

A'client'

B'nodejs'

C'server'

D'edge'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'nodejs' or 'server' disables edge features.

Using 'client' is not a valid runtime value.

Setting runtime to 'edge' enables edge functions which support geolocation in Next.js.

4fill in blank

hard

Fill both blanks to create a server action that uses geolocation and returns the country code.

NextJS

export const getCountry = async () => {
  const { country } = await fetch('/api/geo').then(res => res.json());
  return country [1] 'US' ? 'USA' : 'Other';
};

export const runtime = [2];

Drag options to blanks, or click blank then click option'

A===

B!==

C'edge'

D'server'

Attempts:

3 left

💡 Hint

Common Mistakes

Using !== instead of === causes wrong logic.

Setting runtime to 'server' disables edge features.

The code compares the country code with 'US' using strict equality ===. The runtime must be set to 'edge' to support geolocation.

5fill in blank

hard

Fill all three blanks to create a Next.js server component that fetches geolocation and displays the city.

NextJS

import React from 'react';

export const runtime = [1];

export default async function GeoCity() {
  const res = await fetch('/api/geo');
  const data = await res.json();
  const city = data.[2] ?? 'Unknown';

  return <p>Your city is: [3]</p>;
}

Drag options to blanks, or click blank then click option'

A'edge'

Bcity

C{city}

D'server'

Attempts:

3 left

💡 Hint

Common Mistakes

Setting runtime to 'server' disables edge features.

Using quotes around city in JSX instead of curly braces.

Accessing data.city as a string instead of a key.

The runtime is set to 'edge' for geolocation support. The city is accessed from the data object by the key city. The JSX expression uses curly braces {city} to display the city value.