Migrer de react-i18next vers Intlayer

Pour un tutoriel complet et détaillé étape par étape, consultez notre Guide de Migration react-i18next.

L'adaptateur de compatibilité d'Intlayer vous permet de migrer depuis react-i18next sans aucune modification de vos importations de code source.

Ce qu'il faut faire

Pour initialiser le projet, exécutez :

npx intlayer init

Lors de l'initialisation, Intlayer installera @intlayer/react-i18next et créera intlayer.config.ts. Dans votre bundler (comme Vite), appliquez le plugin Intlayer :

import { defineConfig } from "vite";import react from "@vitejs/plugin-react";import { reactI18nextVitePlugin } from "@intlayer/react-i18next/plugin";export default defineConfig({  plugins: [react(), reactI18nextVitePlugin()],});

Fonctionnement interne

Le reactI18nextVitePlugin encapsule le plugin vite-intlayer principal et injecte des alias de résolution pour react-i18next et i18next, les redirigeant vers @intlayer/react-i18next et @intlayer/i18next.

Fonctionnement interne :

• useTranslation & withTranslation: Réécrit pour utiliser les hooks natifs d'Intlayer, vous donnant l'autocomplétion TypeScript automatique pour vos clés de dictionnaire. Il prend en charge les namespaces de manière transparente (ex. t('namespace:key')).
• Plurals & Context: Gère la pluralisation basée sur des suffixes d'i18next (key_one, key_other) en utilisant Intl.PluralRules natif et les suffixes de contexte (key_male).
• <Trans> Component: Ré-implémenté pour supporter la prop components, les formes objet et tableau, et les tags numérotés <1>...</1> mappant directement à vos nœuds React.
• i18n instance: Résout les clés directement depuis Intlayer sans récupérer de gros fichiers JSON, ce qui réduit considérablement la taille du bundle.