Next.js App Router avec react-intl : Tutoriel i18n Complet 2026

Réponse Rapide

Pour utiliser react-intl avec Next.js App Router : Installez react-intl, créez des fichiers de messages au format ICU et enveloppez votre app avec IntlProvider.

Configuration

TerminalCopy
npm install react-intl @formatjs/intl-localematcher

messages/fr.json:

JSONCopy
1{
2  "home.titre": "Bienvenue dans notre application",
3  "home.items": "{count, plural, =0 {Aucun article} one {# article} other {# articles}}"
4}

IntlProvider

TSXCopy
1'use client';
2import { IntlProvider } from 'react-intl';
3
4export function IntlClientProvider({ locale, messages, children }) {
5  return (
6    <IntlProvider locale={locale} messages={messages}>
7      {children}
8    </IntlProvider>
9  );
10}

Utilisation

TSXCopy
1import { FormattedMessage, FormattedNumber } from 'react-intl';
2
3<FormattedMessage id="home.titre" />
4<FormattedNumber value={1234.56} style="currency" currency="EUR" />

Articles Connexes

• Comparaison react-i18next vs react-intl