Next-intl library integration in NextJS - Step-by-Step Execution

Concept Flow - Next-intl library integration

Install next-intl

↓

Create messages files

↓

Wrap app with NextIntlProvider

↓

Use useTranslations hook in components

↓

Render translated text

↓

Switch locale to update UI

This flow shows how to add next-intl: install, add messages, wrap app, use translations, and update UI on locale change.

Execution Sample

NextJS

import {NextIntlProvider, useTranslations} from 'next-intl';

export default function App({Component, pageProps}) {
  return <NextIntlProvider messages={pageProps.messages} locale={pageProps.locale}>
    <Component {...pageProps} />
  </NextIntlProvider>;
}

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

This code wraps the app with NextIntlProvider and uses useTranslations hook to show translated 'hello' text.

Execution Table

Step	Action	Input/State	Output/Result
1	Install next-intl package	npm install next-intl	Package ready to use
2	Create messages files	en.json: {"Greeting": {"hello": "Hello!"}}	Messages loaded for locales
3	Wrap app with NextIntlProvider	pageProps.locale='en', pageProps.messages=en.json	Context provides translations
4	Call useTranslations('Greeting') in Greeting component	Context with messages	Returns function t(key)
5	Call t('hello')	Key='hello'	Returns 'Hello!' string
6	Render <p>{t('hello')}</p>	Text 'Hello!'	Paragraph with 'Hello!' shown
7	Change locale to 'fr' with messages	fr.json: {"Greeting": {"hello": "Bonjour!"}}	UI updates to show 'Bonjour!'
8	Call t('hello') again	Key='hello', locale='fr'	Returns 'Bonjour!' string
9	Render updated <p>{t('hello')}</p>	Text 'Bonjour!'	Paragraph updates to 'Bonjour!'
10	End of flow	N/A	App shows translated greeting based on locale

💡 Flow ends after rendering translated text and updating UI on locale change

Variable Tracker

Variable	Start	After Step 3	After Step 5	After Step 7	Final
pageProps.locale	undefined	'en'	'en'	'fr'	'fr'
pageProps.messages	undefined	{"Greeting":{"hello":"Hello!"}}	{"Greeting":{"hello":"Hello!"}}	{"Greeting":{"hello":"Bonjour!"}}	{"Greeting":{"hello":"Bonjour!"}}
t	undefined	function	function returning 'Hello!'	function returning 'Bonjour!'	function returning 'Bonjour!'
Rendered Text	none	none	'Hello!'	'Bonjour!'	'Bonjour!'

Key Moments - 3 Insights

Why do we need to wrap the app with NextIntlProvider?

NextIntlProvider provides the translation context to all components. Without it, useTranslations hook cannot find messages (see step 3 in execution_table).

How does changing the locale update the displayed text?

Changing locale updates pageProps.locale and pageProps.messages, so useTranslations returns translations for the new locale (see steps 7-9). React re-renders with new text.

What does useTranslations('Greeting') return?

It returns a function t(key) that looks up the translation for the given key in the 'Greeting' namespace (see step 4).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'Rendered Text' after step 5?

A undefined

B 'Bonjour!'

C 'Hello!'

D An error

💡 Hint

Check the 'Rendered Text' variable in variable_tracker after step 5

At which step does the UI update to show the French greeting?

A Step 5

B Step 9

C Step 3

D Step 7

💡 Hint

Look at execution_table rows where rendering happens with 'Bonjour!' text

If we remove NextIntlProvider wrapping, what happens when useTranslations is called?

A It throws an error or returns undefined

B It returns translations from default locale

C It works normally

D It shows untranslated keys

💡 Hint

Refer to key_moments about why NextIntlProvider is needed (step 3)

Concept Snapshot

Next-intl integration steps:
1. Install next-intl package
2. Create locale message JSON files
3. Wrap app with <NextIntlProvider> passing locale and messages
4. Use useTranslations(namespace) hook in components
5. Call t(key) to get translated text
6. Change locale to update UI translations automatically

Full Transcript

This visual execution shows how to integrate the next-intl library in a Next.js app. First, install the package and create JSON files with translations for each locale. Then wrap your app component with NextIntlProvider, passing the current locale and messages. Inside components, use the useTranslations hook with a namespace to get a function t that returns translated strings by key. Rendering t('hello') shows the translated greeting. When the locale changes, the provider updates messages and the UI re-renders with new translations. Key points include the need for NextIntlProvider to provide context and how useTranslations depends on it. This step-by-step trace helps beginners see how state changes flow through the app to update displayed text.