Añadir internacionalización (distintos idiomas) en tu web usando i18next y React

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos integrar internacionalización y distintos idiomas usando i18next (https://react.i18next.com/) y React y además lograr detectar el idioma del navegador.

Para implementar internacionalización con i18next en tu aplicación React, primero debes instalar i18next y sus módulos relacionados, como react-i18next. Luego, configurar i18next para que pueda cargar las traducciones desde los archivos JSON correspondientes a cada idioma.

Asumiendo que ya tienes una estructura de directorios en tu proyecto, aquí hay un ejemplo paso a paso:

• Instala las dependencias necesarias:

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector --save

• Añade las traducciones en una carpeta llamada locale de la siguiente forma:

/public
  /locale
    en.json
    es.json
    de.json

En este caso, añadimos Inglés, Español, Alemán.

Los archivos van a contener las traducciones de esta forma:

{
  "welcome": "Welcome",
  "buttonText": "Click me"
  // ... otras traducciones
}

*La misma clave y el valor en distinto idioma según el idioma que sea.

• Ahora vamos a crear el Provider de i18next que contendrá la configuración de los idomas. Para ello vamos a contexts/i18next.tsx

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false,
    },
    backend: {
      // Configuración específica para el backend
      loadPath: '/locale/{{lng}}.json', // Cambiado a la nueva estructura
    },
  });

export default i18n;

Configuramos i18n usando Backend (para permitir cargar los archivos .json), LanguageDetector (para detectar el idioma automático con el navegador), initReactI18next (permite que i18next trabaje de manera eficiente con aplicaciones basadas en React, proporcionando funciones y contexto específicos de React)

Después le indicamos que el idioma por defecto sea en, para que obtenga el .json de inglés, en aquellos idiomas que no existan.

Ahora vamos a añadir el provider a nuestra app, para ello vamos a index.js, app.js, main.js (en mi caso main.tsx) y añadimos:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { I18nextProvider } from 'react-i18next';
import i18n from './context/i18next';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  </React.StrictMode>,
)

Y finalmente, para utilizar la traducción, haremos lo siguiente:

import React from 'react';
import { useTranslation } from 'react-i18next';

function BotonDefecto({ texto }: { texto: string }) {
  const { t } = useTranslation();

  return (
    <button>
      {t('buttonText')} - {texto}
    </button>
  );
}

Y aparecerá: