Why i18n matters in NextJS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why is internationalization (i18n) important in web apps?

Imagine you build a website that only shows text in English. What problem might users from other countries face?

A They will see the website in their own language automatically.

B They might not understand the content because it’s only in English.

C The website will load faster for them.

D The website will have fewer images.

💡 Hint

Think about users who speak different languages than English.

Internationalization helps users from different language backgrounds understand your website by showing content in their language.

❓ component_behavior

intermediate

What happens if you don’t provide translations in Next.js i18n config?

In Next.js, if you set up i18n but forget to add translations for a language, what will the user see?

A The user will see fallback content, usually in the default language.

B The app will crash with an error.

C The user will see blank text where translations are missing.

D The app will automatically translate text using AI.

💡 Hint

Think about how apps handle missing translations gracefully.

Next.js shows fallback content in the default language if translations are missing, so the app doesn’t break.

📝 Syntax

advanced

Which Next.js i18n config correctly sets English and Spanish as supported languages?

Choose the correct i18n configuration snippet for Next.js that supports English (default) and Spanish.

A { locales: ['en', 'es'], defaultLocale: 'en' }

B { languages: ['en', 'es'], default: 'en' }

C { locales: ['en', 'es'], default: 'es' }

D { locales: ['en', 'es'], defaultLocale: 'fr' }

💡 Hint

Check the exact property names Next.js expects for i18n.

Next.js expects locales and defaultLocale keys to define supported languages and default language.

❓ state_output

advanced

What is the rendered output when switching locale in Next.js?

Given a Next.js app with English and Spanish translations for a greeting, what will the user see after switching locale from English to Spanish?

const translations = { en: 'Hello', es: 'Hola' };

A HelloHola

B Hello

C Hola

D Error: Translation not found

💡 Hint

Think about what happens when you change the language setting.

Switching locale updates the displayed text to the selected language’s translation.

🔧 Debug

expert

Why does this Next.js i18n setup cause a 404 error on Spanish pages?

Look at this Next.js config snippet:

module.exports = { i18n: { locales: ['en', 'es'], defaultLocale: 'en' } }

Spanish pages return 404 errors. What is the likely cause?

A Next.js does not support multiple locales.

B The defaultLocale should be 'es' instead of 'en'.

C The locales array must include 'fr' for fallback.

D The Spanish translation files are missing or misnamed.

💡 Hint

Check if translation files exist for all locales.

Missing or incorrectly named translation files for Spanish cause Next.js to fail loading those pages, resulting in 404 errors.