Why i18n matters in NextJS - Visual Breakdown

Concept Flow - Why i18n matters

User visits site

↓

Detect user language

↓

Load translations for language

↓

Render content in user language

↓

User reads content comfortably

↓

User interacts and enjoys site

This flow shows how a website detects the user's language, loads the right translations, and displays content so the user can understand and enjoy it.

Execution Sample

NextJS

import { useRouter } from 'next/router';

export default function Home() {
  const { locale } = useRouter();
  return <p>{locale === 'es' ? 'Hola Mundo' : 'Hello World'}</p>;
}

This code shows a simple Next.js component that changes the greeting based on the user's language setting.

Execution Table

Step	Action	User Language	Locale Detected	Content Rendered
1	User visits site	English	en	Hello World
2	User visits site	Spanish	es	Hola Mundo
3	User visits site	French	fr	Hello World (default)
4	User visits site	No language set	en (default)	Hello World

💡 Rendering stops after content is shown in the detected or default language.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
locale	undefined	en	es	fr	en (default)
content	undefined	Hello World	Hola Mundo	Hello World (default)	Hello World

Key Moments - 2 Insights

Why does the site show English content for French users?

Because the code only has translations for 'en' and 'es'. For other languages like 'fr', it falls back to the default English content as shown in execution_table step 3.

What happens if the user language is not detected?

The site uses a default language, usually English, to show content. This is seen in execution_table step 4 where no language is set and 'en' is used.

Visual Quiz - 3 Questions

Look at the execution table, what content is rendered when the user language is Spanish?

A Hello World

B Hola Mundo

C Bonjour le monde

D Hello World (default)

💡 Hint

Check the 'Content Rendered' column for the row where 'User Language' is Spanish.

At which step does the site use the default English content?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look for 'Hello World (default)' or default content in the 'Content Rendered' column.

If we add French translations, how would the content change at step 3?

A It would still show 'Hello World (default)'

B It would show Spanish content

C It would show 'Bonjour le monde' or French greeting

D It would show an error

💡 Hint

Think about how loading translations affects the 'Content Rendered' column.

Concept Snapshot

i18n means showing your site in many languages.
Next.js detects user language and loads matching translations.
If no match, it shows default language content.
This helps users feel comfortable and understand your site.
Always provide fallback language to avoid empty content.

Full Transcript

Internationalization, or i18n, is important because it lets websites show content in the user's own language. In Next.js, the site detects the user's language setting and loads the right translations. If the language is not supported, it falls back to a default language like English. This process helps users read and interact with the site easily. The example code shows how a simple component changes greeting text based on the detected locale. The execution table traces different user languages and what content is shown. Key moments explain why fallback happens and what occurs if language is not detected. The quiz tests understanding of how content changes with language detection and translation availability.