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.

Practice

1. Why is internationalization (i18n) important in a Next.js app?

easy

A. It automatically fixes bugs in the code.

B. It allows the app to support multiple languages and cultures.

C. It improves the app's loading speed.

D. It reduces the app's file size.

Solution

1. Step 1: Understand the purpose of i18n

   i18n stands for internationalization, which means making an app usable for people from different languages and cultures.

2. Step 2: Identify what i18n affects in an app

   It handles language translations, date formats, number formats, and cultural differences to improve user experience worldwide.

3. Final Answer:

   It allows the app to support multiple languages and cultures. -> Option B

4. Quick Check:

   i18n = support multiple languages [OK]

Hint: i18n means making apps work worldwide [OK]

Common Mistakes:

• Confusing i18n with performance improvements
• Thinking i18n fixes bugs automatically
• Believing i18n reduces file size

2. Which Next.js hook is commonly used to access translations in an i18n setup?

easy

A. useEffect

B. useRouter

C. useState

D. useTranslations

Solution

1. Step 1: Recall Next.js i18n tools

   Next.js provides a hook called useTranslations to easily get translated strings in components.

2. Step 2: Differentiate from other hooks

   useRouter manages routing, useState manages state, and useEffect handles side effects, none are for translations.

3. Final Answer:

   useTranslations -> Option D

4. Quick Check:

   Translation hook = useTranslations [OK]

Hint: Translation hook starts with 'useTranslations' [OK]

Common Mistakes:

• Choosing useRouter for translations
• Confusing useState or useEffect with i18n
• Not knowing Next.js i18n hooks

3. Given this Next.js component using i18n:

import { useTranslations } from 'next-intl';

export default function Greeting() {
  const t = useTranslations('Home');
  return <h1>{t('welcomeMessage')}</h1>;
}

If the translation file for 'Home' has { "welcomeMessage": "Hello, world!" }, what will be rendered?

medium

A. <h1>welcomeMessage</h1>

B. An error because 't' is not a function

C. <h1>Hello, world!</h1>

D. <h1>Home</h1>

Solution

1. Step 1: Understand useTranslations usage

   The hook useTranslations('Home') returns a function t that looks up keys in the 'Home' translation file.

2. Step 2: Check the translation key value

   The key 'welcomeMessage' maps to "Hello, world!" in the translation file, so t('welcomeMessage') returns "Hello, world!".

3. Final Answer:

   <h1>Hello, world!</h1> -> Option C

4. Quick Check:

   t('welcomeMessage') = 'Hello, world!' [OK]

Hint: t('key') returns the translated string [OK]

Common Mistakes:

• Thinking t returns the key name instead of value
• Assuming t is not a function
• Confusing component name with translation output

4. What is wrong with this Next.js i18n code snippet?

import { useTranslations } from 'next-intl';

export default function Header() {
  const t = useTranslations('Header');
  return <h2>t('title')</h2>;
}

medium

A. The translation function call is missing curly braces inside JSX.

B. useTranslations should be called with 'header' lowercase.

C. The component must return a fragment instead of <h2>.

D. The import statement is incorrect.

Solution

1. Step 1: Check JSX syntax for function calls

   In JSX, JavaScript expressions must be inside curly braces. Here, t('title') is written as plain text, so it won't execute.

2. Step 2: Identify the fix

   Wrapping t('title') in curly braces like {t('title')} correctly calls the function and renders the translation.

3. Final Answer:

   The translation function call is missing curly braces inside JSX. -> Option A

4. Quick Check:

   JSX expressions need curly braces [OK]

Hint: JSX needs curly braces for JS expressions [OK]

Common Mistakes:

• Forgetting curly braces around function calls in JSX
• Assuming case sensitivity causes error here
• Thinking import is wrong without checking

5. You want to display a date in a Next.js app that supports i18n. Which approach best respects users' locale settings?

hard

A. Use JavaScript's Intl.DateTimeFormat with the user's locale from Next.js router.

B. Hardcode the date format as 'MM/DD/YYYY' in all components.

C. Convert dates to strings manually with string slicing.

D. Ignore locale and always show ISO date format.

Solution

1. Step 1: Understand i18n date formatting needs

   Dates should appear in formats familiar to users based on their locale (language and region).

2. Step 2: Identify the best tool for locale-aware formatting

   JavaScript's Intl.DateTimeFormat formats dates according to locale, which can be obtained from Next.js router or i18n context.

3. Step 3: Evaluate other options

   Hardcoding or manual string slicing ignores locale differences and reduces usability. ISO format is not user-friendly for all locales.

4. Final Answer:

   Use JavaScript's Intl.DateTimeFormat with the user's locale from Next.js router. -> Option A

5. Quick Check:

   Locale-aware date formatting = Intl.DateTimeFormat [OK]

Hint: Use Intl.DateTimeFormat for locale dates [OK]

Common Mistakes:

• Hardcoding date formats ignoring locale
• Manually slicing date strings incorrectly
• Showing ISO format without localization