Content translation management in NextJS - Mini Project: Build & Apply

Content Translation Management with Next.js

📖 Scenario: You are building a simple multilingual website using Next.js. The site should display a greeting message in different languages based on user selection.This project will guide you to set up translation data, configure language selection, implement translation logic, and complete the component to show translated content.

🎯 Goal: Create a Next.js functional component that manages content translation. The component will store translation data, allow language selection, and display the greeting message in the chosen language.

📋 What You'll Learn

Create a translation data object with English and Spanish greetings

Add a state variable to track the selected language

Implement a function to get the greeting message based on the selected language

Render a dropdown to select language and display the translated greeting

💡 Why This Matters

🌍 Real World

Many websites need to support multiple languages to reach a wider audience. Managing translations in components helps deliver personalized content.

💼 Career

Understanding content translation management is essential for frontend developers working on globalized web applications using frameworks like Next.js.

1

Setup translation data

Create a constant object called translations with two keys: en and es. Each key should map to an object with a greeting property. Set en.greeting to 'Hello' and es.greeting to 'Hola'.

NextJS

# Your code here

Need a hint?

Use a JavaScript object with keys en and es. Each key holds an object with a greeting string.

2

Add language state

Inside a functional component, import useState from React and create a state variable called language with initial value 'en'. Use setLanguage as the setter function.

NextJS

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

// Your code here

Need a hint?

Use const [language, setLanguage] = useState('en') inside your component.

3

Implement translation logic

Inside the Greeting component, create a function called getGreeting that returns the greeting message from translations based on the current language state.

NextJS

import React, { useState } from 'react';

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

export default function Greeting() {
  const [language, setLanguage] = useState('en');

  // Your code here

Need a hint?

Use translations[language].greeting to get the correct greeting.

4

Render language selector and greeting

Complete the Greeting component by returning JSX that includes a <select> element with options for en and es. Add an onChange handler to update language state. Below the selector, display the greeting message by calling getGreeting() inside a <p> tag.

NextJS

import React, { useState } from 'react';

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

export default function Greeting() {
  const [language, setLanguage] = useState('en');

  function getGreeting() {
    return translations[language].greeting;
  }

  // Your code here

Need a hint?

Use a <select> with value bound to language and onChange to update it. Display greeting inside a <p>.