Next-intl library integration in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Next.js component using next-intl?

Consider this Next.js functional component using next-intl for translations. What will it display when the locale is set to en and the messages contain { greeting: 'Hello, {name}!' }?

NextJS

import {useTranslations} from 'next-intl';

export default function Greeting({name}) {
  const t = useTranslations();
  return <p>{t('greeting', {name})}</p>;
}

A Hello, {name}!

B Hello, John!

C greeting

D Error: Missing translation

💡 Hint

Think about how useTranslations replaces placeholders in the message.

The useTranslations hook fetches the message for the key greeting and replaces {name} with the passed prop value. So it outputs "Hello, John!".

📝 Syntax

intermediate

Which option correctly initializes next-intl messages in a Next.js page?

You want to load translations for a Next.js page using next-intl. Which code snippet correctly fetches messages for the current locale?

NextJS

export async function getStaticProps({locale}) {
  // Fill in the correct code to load messages
}

A

const messages = JSON.parse(`../messages/${locale}.json`);
return {props: {messages}};

B

const messages = require(`../messages/${locale}.json`);
return {props: {messages}};

C

const messages = fetch(`../messages/${locale}.json`).then(res => res.json());
return {props: {messages}};

D

const messages = await import(`../messages/${locale}.json`);
return {props: {messages: messages.default}};

💡 Hint

Remember that getStaticProps runs on the server and supports dynamic imports.

Using await import() dynamically loads the JSON file and you must access default to get the messages object. Other options either use unsupported syntax or asynchronous code incorrectly.

🔧 Debug

advanced

Why does this Next.js page using next-intl throw a runtime error?

Given this page code, why does it throw TypeError: t is not a function when rendering?

NextJS

import {useTranslations} from 'next-intl';

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

A Because the component is missing a <IntlProvider> wrapper around it.

B Because the translation key 'welcome' is missing in messages, causing t to be undefined.

C Because useTranslations is assigned without calling it, so t is not a function but a reference to the hook.

D Because useTranslations must be called with a namespace string argument.

💡 Hint

Check how useTranslations is assigned and used.

The code assigns t = useTranslations without parentheses, so t is the hook function itself, not the translation function. Calling t('welcome') causes a TypeError.

❓ state_output

advanced

What is the output after changing locale dynamically with next-intl?

In a Next.js app using next-intl, you have a button that changes the locale from 'en' to 'fr'. What will the component display after clicking the button?

NextJS

import {useTranslations, useLocale, useRouter} from 'next-intl';
import {useState} from 'react';

export default function LocaleSwitcher() {
  const t = useTranslations();
  const locale = useLocale();
  const router = useRouter();
  const [currentLocale, setCurrentLocale] = useState(locale);

  async function switchLocale() {
    const newLocale = currentLocale === 'en' ? 'fr' : 'en';
    setCurrentLocale(newLocale);
    await router.push('/', '/', {locale: newLocale});
  }

  return (
    <>
      <p>{t('greeting')}</p>
      <button onClick={switchLocale}>Switch Locale</button>
    </>
  );
}

A The greeting text updates to French after clicking the button.

B The greeting text stays in English even after clicking the button.

C The page reloads but the greeting text does not change.

D An error occurs because useLocale cannot be updated this way.

💡 Hint

Consider how router.push with a new locale affects the page and translations.

Calling router.push with a new locale reloads the page with that locale, so useTranslations returns messages in French, updating the greeting text.

🧠 Conceptual

expert

Which statement best describes how next-intl handles message loading in Next.js App Router?

In Next.js App Router (app directory), how does next-intl recommend loading locale messages for server components?

A Use async server components to import JSON message files dynamically based on the locale parameter.

B Use a global context provider that fetches messages once on the client side and shares them.

C Load all locale messages statically at build time and pass them as props to client components.

D Use client components with useEffect to fetch messages from an API endpoint at runtime.

💡 Hint

Think about Next.js App Router's server components and static imports.

Next-intl recommends loading messages in async server components by dynamically importing JSON files based on the locale parameter. This leverages server rendering and avoids client fetching.

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