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

Réponse Rapide

Pour utiliser react-i18next avec Next.js App Router : Installez react-i18next i18next, créez un fichier de configuration i18n et utilisez le hook useTranslation.

Configuration du Projet

TerminalCopy
npm install react-i18next i18next i18next-resources-to-backend

Fichiers de Traduction

locales/fr/common.json:

JSONCopy
1{
2  "titre": "Bienvenue dans notre application",
3  "description": "Une application Next.js multilingue"
4}

Utilisation

TSXCopy
1// Server Component
2const { t } = await getTranslation(locale);
3return <h1>{t('titre')}</h1>;
4
5// Client Component
6const { t } = useTranslation(locale);
7return <p>{t('items', { count: 5 })}</p>;

Articles Connexes

• Comparaison react-i18next vs react-intl