Content translation management in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Next.js handle static content translation with i18n routing?

Given a Next.js app configured with i18n locales ['en', 'fr'], what will be the URL path for the French version of the homepage?

A /fr

B /fr/home

C /home?lang=fr

D /?locale=fr

💡 Hint

Next.js i18n routing prefixes the locale as a path segment by default.

Next.js automatically prefixes the locale code as the first path segment for localized routes. So the French homepage is at /fr.

❓ state_output

intermediate

What is the output of this Next.js translation hook usage?

Consider this React component using next-i18next's useTranslation hook:

import { useTranslation } from 'next-i18next';

export default function Greeting() {
  const { t } = useTranslation('common');
  return <h1>{t('welcome_message')}</h1>;
}

If the 'common' namespace JSON for English contains {"welcome_message": "Hello!"}, what will render on the page?

NextJS

import { useTranslation } from 'next-i18next';

export default function Greeting() {
  const { t } = useTranslation('common');
  return <h1>{t('welcome_message')}</h1>;
}

A <h1>common.welcome_message</h1>

B <h1>welcome_message</h1>

C <h1>Translation missing</h1>

D <h1>Hello!</h1>

💡 Hint

The t function returns the translated string for the given key.

The t function looks up the key welcome_message in the 'common' namespace and returns "Hello!" which is rendered inside the <h1> tag.

📝 Syntax

advanced

Which Next.js i18n config snippet correctly sets up English and Spanish locales with English as default?

Choose the valid Next.js configuration for internationalized routing with locales 'en' and 'es', defaulting to 'en'.

A { defaultLocale: 'en', locales: ['en', 'es'] }

B { locales: ['en', 'es'], defaultLocale: 'en' }

C { locales: ['es', 'en'], defaultLocale: 'es' }

D { locales: ['en', 'es'], defaultLocale: 'es' }

💡 Hint

The order of keys in the config object does not matter, but defaultLocale must be one of the locales.

Option A correctly sets defaultLocale to 'en' and includes both locales. The order of keys in the object is irrelevant in JavaScript.

🔧 Debug

advanced

Why does this Next.js translation not update when locale changes?

A component uses useTranslation('common') and renders t('greeting'). The translation JSONs are correct. However, when switching locale, the text does not update. What is the likely cause?

NextJS

import { useTranslation } from 'next-i18next';

export default function Welcome() {
  const { t } = useTranslation('common');
  return <p>{t('greeting')}</p>;
}

A The translation JSON files are missing the 'greeting' key.

B The component is not wrapped with appWithTranslation HOC or provider.

C The locale switcher is not updating the URL path.

D The useTranslation hook is called outside a React component.

💡 Hint

Next-i18next requires a provider or HOC to detect locale changes.

If the app is not wrapped with appWithTranslation or the proper provider, the translation hook won't detect locale changes and won't update the text.

🧠 Conceptual

expert

What is the main advantage of using Next.js Server Components for content translation?

Select the best explanation for why Server Components improve content translation management in Next.js.

A They enable client-side translation switching without page reloads.

B They automatically generate translation JSON files from server logs.

C They allow translation data to be fetched and rendered on the server, reducing client bundle size and improving SEO.

D They cache translations in the browser local storage for offline use.

💡 Hint

Think about where translation data is fetched and rendered.

Server Components fetch and render translation data on the server, so the client receives fully translated HTML. This reduces client JavaScript and improves SEO.

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