Content translation management in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js internationalized routing hook.

NextJS

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

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

AuseTranslation

BuseLocale

CuseRouter

DusePathname

Attempts:

3 left

💡 Hint

Common Mistakes

Using useRouter instead of useLocale

Trying to import useTranslation from next/navigation

The useLocale hook from next/navigation helps get the current locale for content translation management.

2fill in blank

medium

Complete the code to fetch translated messages for the current locale.

NextJS

const messages = await import(`../locales/$[1].json`);

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

Alocale

Blanguage

Cregion

Dlang

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'language' or 'lang' which are not defined in this context

Using 'region' which is not the locale code

The variable locale typically holds the current language code like 'en' or 'fr' to load the correct translation file.

3fill in blank

hard

Fix the error in the code to correctly use the translation messages in a React component.

NextJS

export default async function Greeting() {
  const locale = useLocale();
  const messages = await import(`../locales/$[1].json`);
  return <p>{messages.greeting}</p>;
}

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

Alocale

Blanguage

Cregion

Dlang

Attempts:

3 left

💡 Hint

Common Mistakes

Using undefined variables in import path

Trying to use await inside a normal React component without async

The variable locale must be used to dynamically import the correct translation file.

Also, await cannot be used directly inside the component body; it should be handled in a server component or with hooks.

4fill in blank

hard

Fill both blanks to create a server component that loads translations and renders a greeting.

NextJS

export default async function Greeting() {
  const language = [1]();
  const messages = await import(`../locales/$[2].json`);
  return <p>{messages.greeting}</p>;
}

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

AuseLocale

BuseRouter

Clanguage

Dregion

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up hook names and variable names

Using useRouter instead of useLocale

The useLocale hook gets the current locale, stored in language variable to import the correct JSON file.

5fill in blank

hard

Fill all three blanks to create a translation dictionary comprehension filtering keys starting with 'g'.

NextJS

const filteredMessages = Object.fromEntries(
  Object.entries(messages).filter(([[1]]) => [2].startsWith('[3]'))
);

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

Akey

Bvalue

Cg

Dk

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'value' instead of key in filter

Using different variable names inconsistently

In the filter, the first element of the entry tuple is the key, here named k. We check if k starts with 'g' to keep those entries.