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.