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

Réponse Rapide

Pour utiliser react-intl avec Next.js Pages Router : Installez react-intl, créez des fichiers de messages ICU et enveloppez _app.tsx avec IntlProvider.

Installation

TerminalCopy
npm install react-intl

next.config.js:

JavaScriptCopy
1module.exports = {
2  i18n: {
3    locales: ['fr', 'en', 'es'],
4    defaultLocale: 'fr',
5  },
6};

Messages

lang/fr.json:

JSONCopy
1{
2  "app.titre": "Bienvenue sur Mon App",
3  "app.items": "{count, plural, =0 {Aucun article} one {# article} other {# articles}}"
4}

Configuration _app.tsx

TSXCopy
1import { IntlProvider } from 'react-intl';
2import { useRouter } from 'next/router';
3
4export default function App({ Component, pageProps }) {
5  const { locale } = useRouter();
6  return (
7    <IntlProvider locale={locale} messages={pageProps.messages}>
8      <Component {...pageProps} />
9    </IntlProvider>
10  );
11}

Utilisation

TSXCopy
import { FormattedMessage } from 'react-intl';

<FormattedMessage id="app.titre" />

Articles Connexes

• Comparaison react-i18next vs react-intl