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.