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

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

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

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

Hint

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

Practice

1. What is the main purpose of using useTranslations in a Next.js app?

easy

A. To load and display text in different languages based on user preference

B. To manage user authentication and sessions

C. To optimize images for faster loading

D. To handle API requests and responses

Solution

1. Step 1: Understand the role of useTranslations

   This hook is designed to fetch the correct text strings from translation files depending on the user's language.

2. Step 2: Identify the purpose in context

   Since it loads text in different languages, it helps show the site content in the user's preferred language.

3. Final Answer:

   To load and display text in different languages based on user preference -> Option A

4. Quick Check:

   useTranslations = load text by language [OK]

Hint: Remember: useTranslations is for language text, not other features [OK]

Common Mistakes:

• Confusing translation hook with authentication
• Thinking it manages images or APIs
• Assuming it changes site layout

2. Which of the following is the correct way to import the useTranslations hook in a Next.js component?

easy

A. import { useTranslations } from 'next/router';

B. import useTranslations from 'react';

C. import { useTranslations } from 'next-intl';

D. import useTranslations from 'next/head';

Solution

1. Step 1: Identify the correct package for translations

   The useTranslations hook comes from the next-intl package, which handles internationalization in Next.js.

2. Step 2: Check the import syntax

   The correct syntax uses named import from 'next-intl', so import { useTranslations } from 'next-intl'; is correct.

3. Final Answer:

   import { useTranslations } from 'next-intl'; -> Option C

4. Quick Check:

   Correct import = import { useTranslations } from 'next-intl'; [OK]

Hint: useTranslations always imports from 'next-intl' with curly braces [OK]

Common Mistakes:

• Importing from 'react' or 'next/router' by mistake
• Using default import instead of named import
• Importing from unrelated Next.js modules

3. Given this Next.js component snippet using useTranslations:

import { useTranslations } from 'next-intl';

export default function Greeting() {
  const t = useTranslations('Greeting');
  return <h1>{t('hello')}</h1>;
}

If the translation JSON for English is {"hello": "Hello!"} and for Spanish is {"hello": "¡Hola!"}, what will be rendered when the user language is Spanish?

medium

A. ¡Hola!

B. Hello!

C. {t('hello')}

D. Greeting.hello

Solution

1. Step 1: Understand how useTranslations works with keys

   The hook returns a function t that looks up the key 'hello' in the 'Greeting' namespace for the current language.

2. Step 2: Apply the Spanish translation

   Since the user language is Spanish, the key 'hello' maps to '¡Hola!'. So the component renders <h1>¡Hola!</h1>.

3. Final Answer:

   <h1>¡Hola!</h1> -> Option A

4. Quick Check:

   Spanish 'hello' = '¡Hola!' [OK]

Hint: Match key to language JSON to find displayed text [OK]

Common Mistakes:

• Thinking it renders the key name instead of translation
• Confusing English and Spanish outputs
• Expecting raw function output instead of string

4. You have this code snippet in a Next.js page:

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations('Home');
  return <h2>{t('welcome')}</h2>;
}

But when running, you get an error: TypeError: t is not a function. What is the most likely cause?

medium

A. The useTranslations hook is imported incorrectly

B. The translation JSON file for 'Home' is missing or not loaded

C. The component is missing a return statement

D. The key 'welcome' is misspelled in the code

Solution

1. Step 1: Analyze the error message

   The error says t is not a function, meaning useTranslations did not return a function.

2. Step 2: Check common causes

   This usually happens if the translation data for the 'Home' namespace is missing or not loaded, so the hook cannot create the translation function.

3. Final Answer:

   The translation JSON file for 'Home' is missing or not loaded -> Option B

4. Quick Check:

   Missing translation data causes t not a function error [OK]

Hint: Check translation files exist and load before using hook [OK]

Common Mistakes:

• Assuming import error without checking translation files
• Thinking it's a syntax error
• Ignoring missing translation JSON

5. You want to show a greeting message that changes based on user language and also includes the user's name dynamically. Which approach correctly uses useTranslations with interpolation in Next.js?

hard

A. const t = useTranslations('Greeting'); return {t('welcome', userName)}; // JSON: { "welcome": "Hello, {name}!" }

B. const t = useTranslations('Greeting'); return {t('welcome') + userName}; // JSON: { "welcome": "Hello," }

C. const t = useTranslations('Greeting'); return {t('welcome')}; // JSON: { "welcome": "Hello, userName!" }

D. const t = useTranslations('Greeting'); return {t('welcome', { name: userName })}; // JSON: { "welcome": "Hello, {name}!" }

Solution

1. Step 1: Understand interpolation syntax in useTranslations

   The hook supports passing an object with variables to replace placeholders like {name} in the translation string.

2. Step 2: Match code and JSON for correct interpolation

   const t = useTranslations('Greeting'); return <p>{t('welcome', { name: userName })}</p>; // JSON: { "welcome": "Hello, {name}!" } passes an object { name: userName } matching the placeholder {name} in JSON, so it correctly inserts the user's name.

3. Final Answer:

   const t = useTranslations('Greeting'); return <p>{t('welcome', { name: userName })}</p>; // JSON: { "welcome": "Hello, {name}!" } -> Option D

4. Quick Check:

   Interpolation needs object with keys matching placeholders [OK]

Hint: Pass an object with keys matching placeholders for interpolation [OK]

Common Mistakes:

• Concatenating strings instead of using interpolation
• Passing variable directly instead of an object
• Hardcoding variable names inside translation strings