Librería de traducción i18next con React
Hoy en día es fundamental tener tus aplicaciones en tu idioma nativo, pero también es necesario dar la posibilidad al usuario de poder utilizar el inglés o cualquier otro idioma en tu aplicación. De esta manera podrás crecer más versátilmente entre mucha mas gente, pudiendo así dar a conocer tu aplicación internacionalmente.
Para poder realizar una traducción, los propios navegadores como Chrome ya te dan la posibilidad de poder traducir el contenido de una página, siempre y cuando el idioma esté declarado en el atributo Lang del fichero HTML y sea distinto del navegador del usuario.
En este caso vamos a utilizar una de las tantas librerías que existen para poder traducir nuestras aplicaciones. Dicha librería es i18next.
La librería i18next está construida en JS lo que permite una gran integración con Frameworks del mismo lenguaje como en este caso ReactJS, y tiene soporte con varios lenguajes.
Desarrollo
Con nuestro proyecto de react ya creado, debemos de importar la librería i18next.
| npm install react-i18next |
Tras agregar la librería, debemos configurarla para poder utilizarla.
Vamos a crear una carpeta aparte con un archivo llamado i18next.config.js para tener la lógica separada del resto de la aplicación. Dicha carpeta irá dentro de /src.
Dentro del archivo i18next.config.js realizaremos la lógica para que funcione.
- Debemos hacer el import de la constante i18n que nos proporcionara el acceso a todos sus métodos, especialmente al .init. Y además también haremos el import de initReactI18next.
- Seguido del paso anterior, haremos uso de los dos imports. Donde lng, es el idioma que va a utilizar nuestra aplicación, fallbackLng, el idioma por defecto, y resources, donde podremos realizar las traducciones, incluyendo también variables.
Con la configuración más básica ya creada, iremos a nuestro index.js para importarlo y que la aplicación lo pueda reconocer.
Tras esto nos iremos a nuestro componente App.js que es donde vamos a trabajar con todo lo anterior.
Empezaremos importando el hook useTranslation que contiene las dos variables que contienen los métodos de la librería
Dentro del componente App inicializaremos el useTranslation
Y en la parte html vamos a darle uso. Llamaremos a las traducciones creadas anteriormente. Como le dimos opción a meter variables debemos tenerlo en cuenta. Y para ver el funcionamiento, debemos iniciar la aplicación
Como podemos observar no ha indexado bien nuestro html dentro de las traducciones. Para que acepte html, debemos utilizar una propiedad de react, que es dangerouslySetInnerHTML.
Nos ofrece también la posibilidad de acceder al idioma que está utilizando actualmente la aplicación. En nuestro caso es el español, como bien hemos configurado al inicio.
Esta variable, la propia librería la almacena en el localStorage. Para ver que realmente está funcionando nuestra aplicación la cambiaremos de es (español) a en (english) para poder ver los cambios de idioma.
Para hacer esto nos iremos a nuestro archivo de configuración y en el idioma por defecto pondremos el inglés.
Con esto ya tendríamos lo básico para poder utilizar traducciones en nuestra app.
Vamos a profundizar mas allá de lo básico. Ahora vamos a implementar ficheros propios de traducción para tenerlo todo mas organizado y que nos sea mas sencillo el poder realizar las traducciones.
Para ello nos iremos a nuestra carpeta public y dentro generaremos una carpeta locales con tantas subcarpetas como idiomas tengamos, a su vez dentro de cada carpeta tendremos que generar los archivos json donde irán las traducciones (todos los ficheros deben llamarse igual en las distintas carpetas).
Dentro de los archivos pondremos en formato JSON las traducciones.
Con todo esto ya creado deberemos añadir un par de plugins más de la librería.
| npm install i18next-browser-languagedetector |
| npm install i18next-http-backend |
Nos iremos al archivo de configuración y lo modificaremos para que acceda a los archivos de traducción locales.
Deberemos importar estos dos plugins:
Y tendremos que modificar un par de parámetros en el propio archivo. Utilizaremos tanto el Backend, que nos permite hacer llamadas a nuestros ficheros y LanguageDetector
Nuevamente nos iremos a App.js donde deberemos importar Suspense para que mientras cargue nuestros ficheros no se quede la página en blanco
Nos crearemos una función component para englobar toda la nueva lógica.
Primeramente, en la constante creada, le tendremos que indicar que archivos va a utilizar.
Y todo el contenido HTML de App pasa a ser de Welcome.
Finalización
Para finalizar el post, y probar el funcionamiento al 100%, nos crearemos dos funciones, una que cambie al español y la otra que cambie a inglés para llevarlo a un caso más práctico.
Conclusión
Tras haber estado investigando y trabajando anteriormente con esta librería, puedo asegurar que es una herramienta muy potente para poder hacer tus aplicaciones en distintos idiomas y así poder alcanzar a más público.
Por otro lado, la librería ofrece múltiples opciones a la hora de poder tratar las propias traducciones, ya sea en el mismo fichero de configuración o en ficheros aparte, que a mi parecer es lo más cómodo, ya que a la hora de escalar una app es mejor tener todo aislado y controlado.
Autor/a: David Domínguez Blanco
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
Código / recursos utilizados / Otros datos de interés:
GitHub: https://github.com/DavidDominguez2/react-i18next.git