Next.js + next-i18next : Le Guide Complet (Pages Router) [2026]

Introduction

Bien que l'App Router soit le nouveau standard, de nombreuses applications Next.js de production utilisent encore le Pages Router. La solution de facto pour l'internationalisation dans cette architecture est next-i18next.

Ce guide couvre la configuration recommandée pour 2026.

Installation

TerminalCopy
npm install next-i18next i18next react-i18next

Configuration

1. Créez un fichier next-i18next.config.js à la racine :

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

2. Importez cette config dans next.config.js :

JavaScriptCopy
1const { i18n } = require('./next-i18next.config');
2
3module.exports = {
4  i18n,
5};

Utilisation (SSR/SSG)

Le point clé avec next-i18next est que vous devez charger les traductions au niveau de la page via getStaticProps ou getServerSideProps.

JavaScriptCopy
1// pages/index.js
2import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
3import { useTranslation } from 'next-i18next';
4
5export async function getStaticProps({ locale }) {
6  return {
7    props: {
8      ...(await serverSideTranslations(locale, ['common', 'footer'])),
9    },
10  };
11}
12
13export default function Homepage() {
14  const { t } = useTranslation('common');
15  return <h1>{t('welcome')}</h1>;
16}

App Wrapper

Enfin, enveloppez votre application dans pages/_app.js.

JavaScriptCopy
1import { appWithTranslation } from 'next-i18next';
2
3function MyApp({ Component, pageProps }) {
4  return <Component {...pageProps} />;
5}
6
7export default appWithTranslation(MyApp);

Structure des fichiers

Par défaut, next-i18next attend vos fichiers JSON dans public/locales/{lang}/{ns}.json.

public/
  locales/
    en/
      common.json
    fr/
      common.json

Gestion avec IntlPull

Pour synchroniser ces fichiers JSON sans maux de tête :

TerminalCopy
npx @intlpullhq/cli pull --output public/locales

Cela téléchargera automatiquement les dernières traductions de votre projet IntlPull directement dans le dossier public de Next.js.

Conclusion

next-i18next reste une solution solide et éprouvée pour les projets Next.js utilisant le Pages Router. Elle tire parti du support i18n natif de Next.js pour le routage, assurant un excellent SEO et performance.