Next-intl library integration in NextJS - Mini Project: Build & Apply

Next-intl Library Integration

📖 Scenario: You are building a simple Next.js app that supports multiple languages. You want to show a greeting message that changes based on the user's language preference.

🎯 Goal: Integrate the next-intl library to provide translations for English and Spanish. Display a greeting message that updates when the language changes.

📋 What You'll Learn

Create a messages object with English and Spanish translations

Set up a locale variable to switch languages

Use the useTranslations hook from next-intl to get translated text

Render the greeting message using the translation hook

💡 Why This Matters

🌍 Real World

Many websites need to support multiple languages to reach a wider audience. Using next-intl helps manage translations cleanly in Next.js apps.

💼 Career

Knowing how to integrate internationalization libraries like next-intl is valuable for frontend developers working on global applications.

1

Create the messages object with translations

Create a constant called messages that holds an object with two keys: en and es. Each key should map to an object with a greeting property. For en, set greeting to 'Hello!'. For es, set greeting to '¡Hola!'.

NextJS

# Your code here

Need a hint?

Use a JavaScript object with keys en and es. Each key should have a nested object with greeting text.

2

Set up the locale variable

Create a constant called locale and set it to the string 'en' to represent the current language.

NextJS

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

# Your code here

Need a hint?

Just create a string variable named locale with value 'en'.

3

Use the useTranslations hook to get the greeting

Inside a React functional component called Greeting, use the useTranslations hook from next-intl with the namespace '' (empty string). Assign the result to a constant called t. Then get the greeting text by calling t('greeting') and assign it to a constant called greetingText.

NextJS

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

const locale = 'en';

function Greeting() {
  // Your code here
}

Need a hint?

Import useTranslations from next-intl. Use it inside the Greeting component with an empty string namespace.

4

Render the greeting message in the component

In the Greeting component, return a <div> element that displays the greetingText. Export the Greeting component as default.

NextJS

import { useTranslations } from 'next-intl';

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

const locale = 'en';

function Greeting() {
  const t = useTranslations('');
  const greetingText = t('greeting');

  // Your code here
}

Need a hint?

Return a <div> with the greeting text inside. Export the component as default.