Locale detection strategies in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the user's preferred language from the browser in Next.js.

NextJS

const userLocale = [1] || 'en';

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

Anavigator.language

Bnavigator.languages

Cnavigator

Dnavigator.userLanguage

Attempts:

3 left

💡 Hint

Common Mistakes

Using navigator.languages returns an array, not a string.

Using navigator.userLanguage is only supported in some browsers.

The navigator.language property returns the browser's preferred language as a string, such as 'en-US'.

2fill in blank

medium

Complete the code to detect locale from the URL pathname in Next.js.

NextJS

const locale = router.[1].split('/')[1] || 'en';

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

Alocale

BasPath

Cquery

Dpathname

Attempts:

3 left

💡 Hint

Common Mistakes

Using router.pathname which may not reflect the actual URL.

Using router.query which is an object, not a string.

router.asPath gives the actual URL path including locale prefix, which we split to get the locale.

3fill in blank

hard

Fix the error in this Next.js middleware code to correctly detect locale from the request headers.

NextJS

const locale = req.headers.get('[1]')?.split(',')[0] || 'en';

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

Auser-language

Bcontent-language

Caccept-language

Dlocale

Attempts:

3 left

💡 Hint

Common Mistakes

Using content-language which is a response header.

Using user-language which is not a standard header.

The accept-language header contains the user's preferred languages in order.

4fill in blank

hard

Fill both blanks to create a Next.js middleware that redirects to the locale path if missing.

NextJS

if (!req.nextUrl.pathname.startsWith('/[1]')) {
  return NextResponse.redirect(new URL('/[2]' + req.nextUrl.pathname, req.url));
}

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

Aen

Bfr

Ces

Dde

Attempts:

3 left

💡 Hint

Common Mistakes

Using different locale codes in the two blanks causing inconsistent redirects.

Forgetting the leading slash in the path.

This middleware checks if the path starts with '/en' and redirects to add '/en' if missing.

5fill in blank

hard

Fill all three blanks to create a Next.js server component that shows the detected locale from headers.

NextJS

export default async function LocaleDisplay() {
  const locale = headers().get('[1]')?.split(',')[0] || '[2]';
  return <p>Your locale is: [3]</p>;
}

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

Aaccept-language

Ben

C{locale}

Dcontent-language

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'content-language' header which is not sent by browsers.

Not wrapping the locale variable in curly braces in JSX.

The component reads the 'accept-language' header, defaults to 'en', and displays the locale inside a paragraph.