@intlayer/react-i18next: adaptador de compatibilidad para react-i18next

Para un tutorial completo y detallado paso a paso, por favor consulta nuestra Guía Completa de Migración de react-i18next.

Usar el adaptador de compatibilidad de Intlayer te permite migrar desde react-i18next sin ningún cambio en las importaciones de tu código fuente.

Qué hacer

Para inicializar el proyecto, ejecuta:

npx intlayer init --interactive

Durante la inicialización, Intlayer instalará @intlayer/react-i18next y creará intlayer.config.ts. En tu empaquetador (como Vite), aplica el plugin de Intlayer:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { reactI18nextVitePlugin } from "@intlayer/react-i18next/plugin";

export default defineConfig({
  plugins: [react(), reactI18nextVitePlugin()],
});

Qué hace bajo el capó

El reactI18nextVitePlugin envuelve el plugin principal vite-intlayer e inyecta alias de resolución para react-i18next e i18next, redireccionándolos a @intlayer/react-i18next y @intlayer/i18next.

Bajo el capó:

• useTranslation y withTranslation: Reescritos para usar hooks nativos de Intlayer, dándote finalización automática de TypeScript para tus claves de diccionario. Soporta sin problemas namespaces (p. ej. t('namespace:key')).
• Plurales y contexto: Maneja la pluralización basada en sufijos de i18next (key_one, key_other) usando Intl.PluralRules nativo y sufijos de contexto (key_male).
• Componente <Trans>: Reimplementado para soportar la prop components, formularios de objeto y array, y etiquetas numeradas <1>...</1> directamente mapeadas a tus nodos React.
• Instancia de i18n: Resuelve claves directamente desde Intlayer sin buscar archivos JSON grandes, resultando en tamaños de bundle significativamente menores.

Para entender de dónde vienen estas bibliotecas, lee la historia del i18n en JavaScript.