Server component translations in NextJS - Mini Project: Build & Apply

Server Component Translations in Next.js

📖 Scenario: You are building a simple Next.js app that shows a greeting message in different languages. The greeting text will come from server-side translations.

🎯 Goal: Create a Next.js server component that loads translation data and displays a greeting message based on a language code.

📋 What You'll Learn

Create a translations object with English and Spanish greetings

Add a variable to select the current language code

Use the language code to get the correct greeting from translations

Create a server component that renders the greeting message

💡 Why This Matters

🌍 Real World

Many websites need to show content in different languages depending on the user. Server components can load translations on the server for fast, SEO-friendly pages.

💼 Career

Understanding server component translations is important for building internationalized Next.js apps, a common requirement in web development jobs.

1

Create the translations data

Create a constant object called translations with two keys: en and es. Each key should have a greeting message string: 'Hello, world!' for English and '¡Hola, mundo!' for Spanish.

NextJS

// Create the translations object with English and Spanish greetings
// Your code here

Need a hint?

Use a JavaScript object with keys en and es and assign the greeting strings as values.

2

Add a language code variable

Add a constant called lang and set it to the string 'es' to select Spanish as the current language.

NextJS

const translations = {
  en: 'Hello, world!',
  es: '¡Hola, mundo!'
};

// Add a constant called lang and set it to 'es'
// Your code here

Need a hint?

Use const lang = 'es'; to set the language code.

3

Get the greeting message using the language code

Create a constant called greeting and set it to the value from translations using the lang variable as the key.

NextJS

const translations = {
  en: 'Hello, world!',
  es: '¡Hola, mundo!'
};

const lang = 'es';

// Create a constant greeting that gets the message from translations using lang
// Your code here

Need a hint?

Use bracket notation: translations[lang] to get the greeting.

4

Create the server component to display the greeting

Create a default exported async function called Greeting that returns a JSX <h1> element containing the greeting constant.

NextJS

const translations = {
  en: 'Hello, world!',
  es: '¡Hola, mundo!'
};

const lang = 'es';

const greeting = translations[lang];

// Create a default exported async function Greeting that returns {greeting}
// Your code here

Need a hint?

Define an async function named Greeting and return JSX with the greeting inside an <h1> tag.