Content translation management in NextJS - Step-by-Step Execution

Concept Flow - Content translation management

User visits page

↓

Detect user language

↓

Load translations for language

↓

Render page with translations

↓

User switches language?

Yes→Load new translations

↓

Re-render page

↓

Page fully rendered

This flow shows how Next.js detects user language, loads translations, renders content, and updates when language changes.

Execution Sample

NextJS

import { useState } from 'react';
import translations from '../locales/translations.json';

export default function Home() {
  const [lang, setLang] = useState('en');
  const t = translations[lang];
  return (
    <div>
      <button onClick={() => setLang('en')}>EN</button>
      <button onClick={() => setLang('fr')}>FR</button>
      <button onClick={() => setLang('es')}>ES</button>
      <div>{t.greeting}</div>
    </div>
  );
}

This code loads a translations object for multiple languages and initially shows an English greeting. Clicking the language switch buttons updates the state and re-renders the component with the new translation.

Execution Table

Step	Action	Language State	Translation Loaded	Rendered Output
1	Initialize lang state	en	translations['en']	Displays greeting in English
2	Render component	en	translations['en']	Shows: Hello!
3	User clicks switch to 'fr'	fr	translations['fr']	Shows: Bonjour!
4	Render component after switch	fr	translations['fr']	Shows: Bonjour!
5	User clicks switch to 'es'	es	translations['es']	Shows: ¡Hola!
6	Render component after switch	es	translations['es']	Shows: ¡Hola!
7	No more language changes	es	translations['es']	Final rendered greeting in Spanish

💡 User stops switching languages; component shows final translation.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
lang	en	fr	es	es
t	translations['en']	translations['fr']	translations['es']	translations['es']
Rendered Output	Hello!	Bonjour!	¡Hola!	¡Hola!

Key Moments - 3 Insights

Why does the page re-render when the language changes?

Because the 'lang' state changes (see execution_table steps 3 and 5), React re-renders the component with new translations.

What happens if translations for a language are missing?

The component will try to access undefined keys, resulting in missing text or errors. Always ensure translations exist for all supported languages.

How does Next.js know which language to load initially?

You can detect user language from headers or browser settings and set the initial 'lang' state accordingly (step 1 in execution_table).

Visual Quiz - 3 Questions

Look at the execution_table, what is the 'lang' value after step 3?

A fr

B en

C es

D undefined

💡 Hint

Check the 'Language State' column at step 3 in the execution_table.

At which step does the rendered output first show a greeting in Spanish?

A Step 4

B Step 5

C Step 2

D Step 6

💡 Hint

Look at the 'Rendered Output' column for Spanish greeting in the execution_table.

If the user never switches language, what will the final rendered output be?

A Bonjour!

B ¡Hola!

C Hello!

D No output

💡 Hint

Check the initial 'lang' and output in the variable_tracker and execution_table.

Concept Snapshot

Content translation management in Next.js:
- Detect user language or set default
- Load translations JSON for that language
- Use React state to track current language
- Render UI text from translations
- Update state to switch languages and re-render
- Ensure all languages have translation keys

Full Transcript

This visual execution shows how Next.js manages content translation. It starts by setting a language state, loading the matching translations, and rendering the page text accordingly. When the user changes the language, the state updates, triggering a re-render with new translations. The execution table tracks each step, showing language state, loaded translations, and rendered output. Key moments clarify why re-render happens on language change and the importance of having all translations. The quiz tests understanding of state changes and output at each step. This approach helps beginners see how translation management works in a React-based Next.js app.

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