Aprovechando i18next para la Internacionalización Basada en React

La internacionalización (i18n) es vital para expandir el alcance del software a través de los mercados globales. Una de las herramientas más efectivas para este propósito en el ecosistema de JavaScript es i18next. Este artículo explora i18next, particularmente su integración con React, y destaca sus ventajas, compatibilidad con varios marcos y consejos para mejorar los esfuerzos de localización.

¿Qué es i18next?

i18next es un sólido marco de internacionalización para aplicaciones JavaScript. Simplifica la adición de soporte multilingüe a aplicaciones web, móviles y de escritorio. El marco permite la gestión de traducción dinámica, lo que facilita la adaptación de las aplicaciones a diferentes idiomas y regiones.

Ventajas de i18next

• Facilidad de integración

i18next es fácil de integrar en proyectos existentes y es compatible con frameworks JavaScript populares como React, Angular y Vue. Esta versatilidad lo convierte en una opción preferida para los desarrolladores.

• Personalización y flexibilidad

i18next ofrece una estructura modular que permite a los desarrolladores usar solo las funciones que necesitan. Este alto grado de personalización garantiza que el framework pueda ajustarse a una amplia gama de requisitos del proyecto.

• Carga dinámica de traducciones

El framework admite la carga dinámica de traducciones, optimizando el rendimiento al recuperar solo los recursos de idioma necesarios a pedido.

• Pluralización y contextualización

i18next incluye soporte incorporado para manejar la pluralización y la contextualización, asegurando variaciones precisas del idioma según la cantidad o el contexto.

• Soporte para varios formatos de archivo

• Soporte para múltiples formatos de archivo para almacenar traducciones

Soporta múltiples formatos de archivo para almacenar traducciones, incluyendo JSON y YAML, permitiendo flexibilidad en la elección del formato que mejor se adapte a las necesidades del proyecto.

• Ecosistema abundante

Una comunidad próspera y un ecosistema rico proporcionan plugins, extensiones y soporte para mejorar y ampliar la funcionalidad de i18next, ahorrando tiempo y esfuerzo en el desarrollo.

• Múltiples opciones de backend

i18next admite varios backends para almacenar y recuperar traducciones, como en memoria, HTTP y backends personalizados, lo que permite la integración con diferentes soluciones de almacenamiento.

• Desarrollo activo y mantenimiento

Las actualizaciones y mejoras periódicas mantienen a i18next actualizado con las mejores prácticas y las necesidades cambiantes en el desarrollo web.

Integración de React-i18next

Una de las integraciones más populares de i18next es con React a través de las react-i18next bindings. Esta combinación permite una internacionalización eficiente dentro de los componentes de React, facilitando el cambio dinámico de idioma y la gestión fluida de la traducción.

Configure i18next en su aplicación React（nextjs) configurando la instancia de i18next e inicializándola con las opciones necesarias.

Ejemplo de código para React-i18next

Aquí hay un ejemplo paso a paso de cómo configurar y utilizar react-i18next en una aplicación React:

1. Instalar dependencias

Primero, instale i18next, react-i18next y next-i18next para cargar traducciones desde el servidor:

npm install i18next react-i18next next-i18next

2. Inicializar i18next

Crea un archivo llamado next-i18next.config.js para configurar e inicializar i18next:

// next-i18next.config.js
const path = require('path'); // Agrega esta línea para definir path
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],  // agrega tus idiomas aquí
    // localeDetection: false,  // el valor predeterminado es true
  },
  localePath: path.resolve('./content/locales'),  // aquí está la ruta de tu archivo i18n 
  // ns: ['common','componentFeature'],
  languageNames: {
    'en': 'English',
  },
}

// next.config.js
const { i18n } = require('./next-i18next.config')
module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [

    ];
  },
  i18n,  // agrega esta configuración i18n
};

3. Configuración de los archivos de traducción

Crea una carpeta locales con subcarpetas para cada idioma (es, de, etc.). Dentro de cada subcarpeta, crea un archivo translation.json:

ejemplo:

-content
  -locales
    -es
      -translation.json
      -'otro archivo si lo tienes'.json
    -de
      -translation.json
      -'otro archivo si lo tienes'.json

locales/es/translation.json

{
  "welcome": "Bienvenido",
  "description": "Esta es una descripción de muestra."
}

locales/de/translation.json

{
  "welcome": "Willkommen",
  "description": "Dies ist eine Beispielbeschreibung."
}

4. Envuelve tu Aplicación con I18nextProvider

En tu archivo principal como index.js, App.js o _app.tsx, envuelve tu aplicación con appWithTranslation:

import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    ...
  );
}

export default appWithTranslation(MyApp)  // envuelve así 

5. Usar el Gancho de Traducción en Componentes

Ahora, puedes usar el gancho useTranslation para traducir cadenas en tus componentes:

Primero, debes usar serverSideTranslations en el archivo de nivel de página

export const getStaticProps: GetStaticProps = async ({ }) => {
  return {
    props: {
      ...(await serverSideTranslations(safeLocale, [
        'translation', 'other'
      ])),
    },
  };
};
export default function Precio() {
      return (
        <div>
          <tuComponente/>
        </div>
    )
}

Y luego en tu Componente

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

const MiComponente = () => {
  const { t } = useTranslation('translation', 'other');  // translation es el valor predeterminado aquí

  return (
    <div>
      <h1>{t('bienvenido')}</h1>
      <p>{t('descripcion')}</p>
      <p>{t('other:tucontenido')}</p> // usa un espacio de nombres diferente
    </div>
  );
};

export default MyComponent;