Why i18n matters in NextJS - See It in Action

Why i18n Matters in Next.js

📖 Scenario: You are building a simple Next.js website that will greet users in different languages. This helps people from different countries feel welcome and understand your site easily.

🎯 Goal: Create a Next.js app that shows a greeting message in English or Spanish based on a language setting. This teaches why internationalization (i18n) is important for reaching more people.

📋 What You'll Learn

Create a data object with greetings in English and Spanish

Add a variable to select the current language

Use the language variable to pick the right greeting

Render the greeting message in a React component

💡 Why This Matters

🌍 Real World

Websites that show content in multiple languages help people from different countries understand and enjoy the site.

💼 Career

Knowing how to implement i18n is important for developers working on global websites or apps to reach wider audiences.

1

Set up greetings data

Create a constant called greetings that is an object with two keys: en and es. Each key should have a string value: 'Hello!' for en and '¡Hola!' for es.

NextJS

// Your code here

Need a hint?

Think of greetings as a dictionary with language codes as keys and greeting messages as values.

2

Add language selection

Create a constant called currentLang and set it to the string 'es' to represent Spanish as the selected language.

NextJS

const greetings = {
  en: 'Hello!',
  es: '¡Hola!'
};

// Your code here

Need a hint?

This variable will help us choose which greeting to show.

3

Select the greeting message

Create a constant called message and set it to the greeting from greetings using the currentLang key.

NextJS

const greetings = {
  en: 'Hello!',
  es: '¡Hola!'
};

const currentLang = 'es';

// Your code here

Need a hint?

Use bracket notation to get the greeting for the selected language.

4

Render the greeting in a React component

Create a React functional component called Greeting that returns a <div> containing the message constant.

NextJS

const greetings = {
  en: 'Hello!',
  es: '¡Hola!'
};

const currentLang = 'es';

const message = greetings[currentLang];

// Your code here

Need a hint?

This component shows the greeting message on the page.