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

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

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
}

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
}

Hint

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

Practice

1. What is the main purpose of the NextIntlProvider component in a Next.js app using next-intl?

easy

A. To fetch data from an API

B. To provide translation messages and locale context to the app

C. To handle routing between pages

D. To style components with CSS

Solution

1. Step 1: Understand the role of NextIntlProvider

   The NextIntlProvider wraps the app and supplies translation messages and locale information to all child components.

2. Step 2: Compare with other options

   Fetching data, routing, and styling are unrelated to NextIntlProvider's purpose.

3. Final Answer:

   To provide translation messages and locale context to the app -> Option B

4. Quick Check:

   NextIntlProvider = translation context provider [OK]

Hint: NextIntlProvider always wraps your app to share translations [OK]

Common Mistakes:

• Confusing NextIntlProvider with data fetching
• Thinking it handles routing or styling
• Not realizing it shares locale and messages

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

easy

A. import { useTranslations } from 'next-intl'; const t = useTranslations('common');

B. import useTranslations from 'next-intl'; const t = useTranslations('common');

C. import { useTranslations } from 'next-intl'; const t = useTranslations();

D. import { useTranslation } from 'next-intl'; const t = useTranslation('common');

Solution

1. Step 1: Check correct import syntax

   The hook is named useTranslations and imported with curly braces from 'next-intl'.

2. Step 2: Verify usage with namespace

   It requires a namespace string like 'common' to get translations from that section.

3. Final Answer:

   import { useTranslations } from 'next-intl'; const t = useTranslations('common'); -> Option A

4. Quick Check:

   Correct import and call with namespace = import { useTranslations } from 'next-intl'; const t = useTranslations('common'); [OK]

Hint: Always import with braces and pass namespace string [OK]

Common Mistakes:

• Importing without braces
• Calling useTranslations without arguments
• Using wrong hook name useTranslation

3. Given this component using next-intl:

import { useTranslations } from 'next-intl';

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

If the messages for locale 'en' are { greeting: { hello: 'Hello, friend!' } }, what will be rendered?

medium

A. An error because 'hello' key is missing

B. <h1>greeting.hello</h1>

C. <h1>Hello, friend!</h1>

D. <h1>Hello</h1>

Solution

1. Step 1: Understand useTranslations usage

   The hook useTranslations('greeting') accesses the 'greeting' namespace in messages.

2. Step 2: Check message key 'hello'

   The key 'hello' inside 'greeting' is 'Hello, friend!'. So t('hello') returns that string.

3. Final Answer:

   <h1>Hello, friend!</h1> -> Option C

4. Quick Check:

   Namespace + key returns correct text = <h1>Hello, friend!</h1> [OK]

Hint: Namespace + key in messages gives displayed text [OK]

Common Mistakes:

• Expecting raw keys instead of translated text
• Assuming missing keys cause errors
• Confusing namespace with key

4. You wrote this code in a Next.js page:

import { NextIntlProvider } from 'next-intl';

export default function Page({ messages }) {
  return (
    <NextIntlProvider messages={messages} locale="en">
      <h1>Welcome</h1>
    </NextIntlProvider>
  );
}

But you get an error: "messages is undefined". What is the likely cause?

medium

A. You forgot to load and pass messages as a prop to the Page component

B. NextIntlProvider does not accept a messages prop

C. Locale must be passed as a number, not a string

D. You must import useTranslations instead of NextIntlProvider

Solution

1. Step 1: Check messages prop usage

   The NextIntlProvider requires a valid messages object passed as a prop.

2. Step 2: Identify cause of undefined

   If messages is undefined, it means the parent or data loader did not supply it properly.

3. Final Answer:

   You forgot to load and pass messages as a prop to the Page component -> Option A

4. Quick Check:

   Missing messages prop causes undefined error [OK]

Hint: Always load and pass messages before using NextIntlProvider [OK]

Common Mistakes:

• Thinking NextIntlProvider doesn't need messages
• Passing locale as number instead of string
• Confusing hooks with provider component

5. You want to support English and Spanish in your Next.js app using next-intl. You have message files:

locales/en.json
locales/es.json

How should you structure your app/layout.tsx to load messages dynamically and provide translations to all pages?

hard

A. Load messages inside each page component instead of layout

B. Import both JSON files statically and pass both to NextIntlProvider at once

C. Use useTranslations in layout to load messages and pass to children

D. Use async function to load messages based on locale, then wrap children with NextIntlProvider passing loaded messages and locale

Solution

1. Step 1: Understand dynamic message loading

   To support multiple locales, load messages dynamically based on the current locale in an async layout or provider.

2. Step 2: Wrap app with NextIntlProvider

   Pass the loaded messages and locale to NextIntlProvider wrapping all children so translations are available app-wide.

3. Final Answer:

   Use async function to load messages based on locale, then wrap children with NextIntlProvider passing loaded messages and locale -> Option D

4. Quick Check:

   Dynamic loading + provider wrapping = Use async function to load messages based on locale, then wrap children with NextIntlProvider passing loaded messages and locale [OK]

Hint: Load messages async by locale, wrap app with NextIntlProvider [OK]

Common Mistakes:

• Importing all locales at once statically
• Loading messages inside pages instead of layout
• Using useTranslations to load messages