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.

Practice

1. What is the main purpose of using useTranslations in a Next.js app?

easy

A. To load and display text in different languages based on user preference

B. To manage user authentication and sessions

C. To optimize images for faster loading

D. To handle API requests and responses

Solution

1. Step 1: Understand the role of useTranslations

   This hook is designed to fetch the correct text strings from translation files depending on the user's language.

2. Step 2: Identify the purpose in context

   Since it loads text in different languages, it helps show the site content in the user's preferred language.

3. Final Answer:

   To load and display text in different languages based on user preference -> Option A

4. Quick Check:

   useTranslations = load text by language [OK]

Hint: Remember: useTranslations is for language text, not other features [OK]

Common Mistakes:

• Confusing translation hook with authentication
• Thinking it manages images or APIs
• Assuming it changes site layout

2. Which of the following is the correct way to import the useTranslations hook in a Next.js component?

easy

A. import { useTranslations } from 'next/router';

B. import useTranslations from 'react';

C. import { useTranslations } from 'next-intl';

D. import useTranslations from 'next/head';

Solution

1. Step 1: Identify the correct package for translations

   The useTranslations hook comes from the next-intl package, which handles internationalization in Next.js.

2. Step 2: Check the import syntax

   The correct syntax uses named import from 'next-intl', so import { useTranslations } from 'next-intl'; is correct.

3. Final Answer:

   import { useTranslations } from 'next-intl'; -> Option C

4. Quick Check:

   Correct import = import { useTranslations } from 'next-intl'; [OK]

Hint: useTranslations always imports from 'next-intl' with curly braces [OK]

Common Mistakes:

• Importing from 'react' or 'next/router' by mistake
• Using default import instead of named import
• Importing from unrelated Next.js modules

3. Given this Next.js component snippet using useTranslations:

import { useTranslations } from 'next-intl';

export default function Greeting() {
  const t = useTranslations('Greeting');
  return <h1>{t('hello')}</h1>;
}

If the translation JSON for English is {"hello": "Hello!"} and for Spanish is {"hello": "¡Hola!"}, what will be rendered when the user language is Spanish?

medium

A. ¡Hola!

B. Hello!

C. {t('hello')}

D. Greeting.hello

Solution

1. Step 1: Understand how useTranslations works with keys

   The hook returns a function t that looks up the key 'hello' in the 'Greeting' namespace for the current language.

2. Step 2: Apply the Spanish translation

   Since the user language is Spanish, the key 'hello' maps to '¡Hola!'. So the component renders <h1>¡Hola!</h1>.

3. Final Answer:

   <h1>¡Hola!</h1> -> Option A

4. Quick Check:

   Spanish 'hello' = '¡Hola!' [OK]

Hint: Match key to language JSON to find displayed text [OK]

Common Mistakes:

• Thinking it renders the key name instead of translation
• Confusing English and Spanish outputs
• Expecting raw function output instead of string

4. You have this code snippet in a Next.js page:

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations('Home');
  return <h2>{t('welcome')}</h2>;
}

But when running, you get an error: TypeError: t is not a function. What is the most likely cause?

medium

A. The useTranslations hook is imported incorrectly

B. The translation JSON file for 'Home' is missing or not loaded

C. The component is missing a return statement

D. The key 'welcome' is misspelled in the code

Solution

1. Step 1: Analyze the error message

   The error says t is not a function, meaning useTranslations did not return a function.

2. Step 2: Check common causes

   This usually happens if the translation data for the 'Home' namespace is missing or not loaded, so the hook cannot create the translation function.

3. Final Answer:

   The translation JSON file for 'Home' is missing or not loaded -> Option B

4. Quick Check:

   Missing translation data causes t not a function error [OK]

Hint: Check translation files exist and load before using hook [OK]

Common Mistakes:

• Assuming import error without checking translation files
• Thinking it's a syntax error
• Ignoring missing translation JSON

5. You want to show a greeting message that changes based on user language and also includes the user's name dynamically. Which approach correctly uses useTranslations with interpolation in Next.js?

hard

A. const t = useTranslations('Greeting'); return {t('welcome', userName)}; // JSON: { "welcome": "Hello, {name}!" }

B. const t = useTranslations('Greeting'); return {t('welcome') + userName}; // JSON: { "welcome": "Hello," }

C. const t = useTranslations('Greeting'); return {t('welcome')}; // JSON: { "welcome": "Hello, userName!" }

D. const t = useTranslations('Greeting'); return {t('welcome', { name: userName })}; // JSON: { "welcome": "Hello, {name}!" }

Solution

1. Step 1: Understand interpolation syntax in useTranslations

   The hook supports passing an object with variables to replace placeholders like {name} in the translation string.

2. Step 2: Match code and JSON for correct interpolation

   const t = useTranslations('Greeting'); return <p>{t('welcome', { name: userName })}</p>; // JSON: { "welcome": "Hello, {name}!" } passes an object { name: userName } matching the placeholder {name} in JSON, so it correctly inserts the user's name.

3. Final Answer:

   const t = useTranslations('Greeting'); return <p>{t('welcome', { name: userName })}</p>; // JSON: { "welcome": "Hello, {name}!" } -> Option D

4. Quick Check:

   Interpolation needs object with keys matching placeholders [OK]

Hint: Pass an object with keys matching placeholders for interpolation [OK]

Common Mistakes:

• Concatenating strings instead of using interpolation
• Passing variable directly instead of an object
• Hardcoding variable names inside translation strings