Next.js Pages Router avec next-i18next : Tutoriel i18n Complet 2026

Réponse Rapide

Pour utiliser next-i18next : Installez le package, créez next-i18next.config.js, enveloppez _app.tsx avec appWithTranslation et utilisez serverSideTranslations.

Installation

TerminalCopy
npm install next-i18next react-i18next i18next

Configuration

next-i18next.config.js:

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

Traductions

public/locales/fr/common.json:

JSONCopy
1{
2  "salutation": "Bonjour, {{name}} !",
3  "items_one": "{{count}} article",
4  "items_other": "{{count}} articles"
5}

Utilisation

TSXCopy
1import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
2import { useTranslation } from 'next-i18next';
3
4export default function Accueil() {
5  const { t } = useTranslation('common');
6  return <h1>{t('salutation', { name: 'Monde' })}</h1>;
7}
8
9export const getStaticProps = async ({ locale }) => ({
10  props: {
11    ...(await serverSideTranslations(locale, ['common'])),
12  },
13});

Articles Connexes

• Comparaison react-i18next vs react-intl