Why i18n matters in NextJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js internationalized routing feature.

NextJS

import { [1] } from 'next-i18next';

Drag options to blanks, or click blank then click option'

AuseTranslation

BgetStaticProps

CHead

DLink

Attempts:

3 left

💡 Hint

Common Mistakes

Importing unrelated Next.js components like Link or Head.

The useTranslation hook is used to access translation functions in Next.js i18n setups.

2fill in blank

medium

Complete the code to get the current language inside a component.

NextJS

const { i18n } = useTranslation();
const currentLanguage = i18n.[1];

Drag options to blanks, or click blank then click option'

Alanguages

BchangeLanguage

Clocale

Dlanguage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'changeLanguage' which is a function to switch languages.

The language property gives the current active language code.

3fill in blank

hard

Fix the error in the translation function call to display a greeting.

NextJS

const { t } = useTranslation();
return <p>{t([1])}</p>;

Drag options to blanks, or click blank then click option'

Awelcome_message

B'welcome_message'

Ct('welcome_message')

D{welcome_message}

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the key without quotes causing a reference error.

The translation key must be a string inside quotes when passed to t().

4fill in blank

hard

Fill both blanks to configure Next.js to support English and Spanish locales.

NextJS

module.exports = {
  i18n: {
    locales: [[1], [2]],
    defaultLocale: 'en',
  },
};

Drag options to blanks, or click blank then click option'

A'en'

B'es'

C'fr'

D'de'

Attempts:

3 left

💡 Hint

Common Mistakes

Using unsupported or unrelated locale codes like 'fr' or 'de'.

English ('en') and Spanish ('es') are common locales for internationalization.

5fill in blank

hard

Fill all three blanks to create a translation JSON object with keys for greeting, farewell, and thanks.

NextJS

{
  "greeting": [1],
  "farewell": [2],
  "thanks": [3]
}

Drag options to blanks, or click blank then click option'

A"Hello"

B"Goodbye"

C"Thank you"

D"Welcome"

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the phrases or missing quotes around strings.

These are common phrases used in translations for greeting, farewell, and thanks.