Sistema de TRADUCCIÓN con REACT JS + i18NEXT

[@oscarsernacarvajal7284]

Eres gigantesco brother, llevaba una semana atrancado con errores, y en solo 15 minutos con tu ayuda logre hacerlo todo.

[@AgustinNavarroGaldon]

Me alegra muchísimo crack!!!

[@magnusmanz]

Buenísimo Agustín... Hace rato que la venía pensando para mi portafolio y no sabía por dónde empezar. Gracias por el contenido

[@AgustinNavarroGaldon]

De nada 😇

[@jpelegrinotube]

Wow excelente video, estaba buscando un tutorial para aplicarlo en mi aplicacion y este video en menos de 15 minutos me resolvio la vida. muchas gracias por la gran aportacion a la comunidad

[@AgustinNavarroGaldon]

De nada es lo minimo que puedo hacer =)

[@alejandrodiaz1172]

Consulta, como lo completas al json si tenes ya la aplicacion armada? O sea con la cantidad de texto que tenes que traducir

[@AgustinNavarroGaldon]

Puedes usar gulp cara crear script y conectar con un servidor en cloud de traducciones

[@sdfsfsfd437]

Muy bien explicado. Muchas gracias. No conocía este método de cómo hacer el cambio de idioma. 💯👍

[@danielricc2898]

Sos un genio Agustín! Gracias por este y muchos videos más!! He comprado alguno de tus cursos, y me encanta como explicas

[@AgustinNavarroGaldon]

Muchísimas gracias crack, me alegra que te estén gustando =)

[@danielricc2898]

@@AgustinNavarroGaldon Sí, muchísimo. Funciona excelente. Lo único que quería saber es como hago para que me mantenga el idioma seleccionado cuando recargo la página, porque al recargar me vuelve al idioma "es" en mi caso. Como recomiendas que se guarde de forma persistente. Gracias!!!!

[@katarinaolympia6088]

Bravooo !!! Perfectamente explicado y claro aunque el español no es mi idioma nativa !!! Gracias 😊

[@camiilaa1679]

Buen video que va al punto... simple, cortito y al pie! Gracias por este graan video!! Me suscribo!

[@AgustinNavarroGaldon]

Gracias a ti!

[@Fechee75]

Este video es oro puro. Impecable!

[@Redes-Antisociales]

domingo 18 abril, 2021 13:31pm sigue funcionando a la perfeccion :), muchisimas gracias

[@AgustinNavarroGaldon]

Crack!

[@diegoberrio1601]

Eres todo un Crack, GRACIAS.

[@AgustinNavarroGaldon]

Gracias 😊

[@alejandroarra8026]

Excelente explicación, me sirvió muchísimo. Muchas gracias!

[@ederapp4955]

He aprendido mucho con tus cursos y videos

[@AgustinNavarroGaldon]

¡Me alegro mucho leer eso, recuerda luego practicar por tu cuenta para ir mejorando! la constancia hace al maestro!

[@ederapp4955]

@@AgustinNavarroGaldon gracias lo seguiré haciendo

[@AlexSearchYT]

Videazo pa! Buena pedagogía. Faltaría mejorar un poco la pronunciación, que hay personas que están empezando y se quedan con eso. Saludos y éxitos!

[@tonoal3005]

Que buena expliación! Muchas gracias

[@julieta1790]

Mil gracias, estaba teniendo problemas con los imports de los JSON. :D

[@AgustinNavarroGaldon]

De nada 😇

[@Iratxebarrio92]

Gracias por el video, me ha servido mucho. Veo que tienes la terminal personalizada, ¿como podría personalizarla igual? Queda muy chula

[@germanpinto883]

si q me has salvado la vida tio!!

[@cristobalmartinez3535]

Gracias por tu contenido, explicas de maravilla!

[@AgustinNavarroGaldon]

Muchas gracias 😊

[@alejandroggp]

Buen trabajo chaval! sigue así! muy útil!

[@AgustinNavarroGaldon]

Muchas gracias 😊

[@jonathanbogado1803]

muchas gracias por este video!!!!!!! me sirvió una banda!!

[@AgustinNavarroGaldon]

Con mucho gusto crack!

[@Arkham17]

Increíble, muy buena explicación! Gracias!

[@AgustinNavarroGaldon]

De nada, es un placer.

[@Arkham17]

@@AgustinNavarroGaldon Pregunta, sabes si hay alguna manera de que la transición entre lenguajes sea más suave?

[@christiandiazportela1798]

Muy útil, muchas gracias Agustin!

[@AgustinNavarroGaldon]

De nada 😊

[@CodeWithDesign]

crack!.. siempre claro

[@AgustinNavarroGaldon]

Gracias 🤩

[@KikeVanegas23]

Jaja así de sencillo no. Explicás muy bien, no hay duda en eso. Pero suponiendo una aplicación grande, es todo un laburo solo la configuración de la app. Gracias por el contenido.

[@AgustinNavarroGaldon]

Si es app grande recomiendo el uso de servicios de terceros como puede ser lokalize para gestionar las traduciones.

[@cesaraquino574]

Gran video!!!

[@Fogell_]

Genial justo lo que estaba buscando 🙌

[@AgustinNavarroGaldon]

Me alegro poder ayudarte 😇

[@cris1887]

super!, me sirvió muchisimo, muy clara tu explicación

[@AgustinNavarroGaldon]

Me alegro mucho :D

[@fernandafortes3782]

Yo ya tengo contenido en mis paginas, yo tendria que copiar cada texto en una pagina global.json ?

[@VM31416]

Buen vídeo colega

[@JoseDavidOchoacairoza]

y para que el boton afecte otros componentes como seria? soy nuevo

[@hector.guerra]

bueniiiisma explicacion

[@stephanierobles4588]

¡Gracias! Súper bien explicado :D

[@AgustinNavarroGaldon]

Es un placer

[@nikitastriuk]

Huge thanks for this lesson. What if we need to translate a variable outside of the React component? For example some shared labels variable from constants.js file (which was used in different files). Translation appears only after page refreshing. Any workaround?

[@AgustinNavarroGaldon]

Si son datos dinámicos tendrás que integrar un sistema de tradiciones desde el backend.

[@maxilujan5]

Muy buen video!!!

[@AgustinNavarroGaldon]

Gracias crack!

[@armandodev_]

Tengo una dudota que espero y alguien me pueda resolver, en temas de SEO siento que es conveniente cambiar la url junto con el idioma pero solo es udea mia no se si afecte en la indexación de páginas y tengo la duda de si afecta como podría solucionarlo

[@johndelgado2005]

¿Que pasa cuando es información que viene de base de datos? Que va cambiando?

[@AgustinNavarroGaldon]

Usa un servicio como lokalize

[@vyctoryalima2776]

muy bien la explicación gracias!

[@AgustinNavarroGaldon]

Gracias 😇

[@skiva7784]

Muchas gracias profe, pero ahora tengo el problema de que cada vez que reinicio la pagina me sale por defaul el idioma elegido del i18next.init, como podria usar el localstorage para que lo configure al idioma ya guardado?

[@skiva7784]

Esta fue la solucion que encontré: const languageConfig = JSON.parse(localStorage.getItem("language_config")); Y poner una condicional: lng: `${languageConfig ? languageConfig.language : "es"}`, en el i18next.init lng

[@flwer1]

funciona con react router? si yo cambio el idioma en la pagina de inicio y me muevo a otra, vuelve al idioma original?

[@AgustinNavarroGaldon]

Puedes usar el localStorage para guardar el idioma que ha seleccionado el usuario y siempre inicializarlo según lo que tengas guardado en el localStorage y si no hay nada guardado pues el default de tu configuración.

[@AlexSearchYT]

grande el jeader

[@VelfinScriptLab]

Se puede usar alguna librería de google traductor para que traduzca automáticamente?

[@AgustinNavarroGaldon]

Puedes probar el siguiente repo. github.com/noahjohn9259/react-google-translate

[@Carlos-ll1ky]

Buenisimo bro, muchas gracias

[@AgustinNavarroGaldon]

De nada 😇

[@aarongarcia1218]

Amigo, para hacerlo con react native cambia mucho ?

[@AgustinNavarroGaldon]

Es muy parecido

[@Pedro-ur1py]

No se si es muy obvio pero es algo que de momento no resuelvo y es, como haria si tengo una propiedad que me llega de una peticion y que suele cambiar como una pequeña description?, porque hasta donde se tengo que especificar su traduccion y si suele cambiar no puedo agregar manualmente su valor ni agregar la propiedad dos veces porque se mostraria igual en los dos idiomas

[@AgustinNavarroGaldon]

Para eso tendrías que usar un servicio de traducciones

[@CarlosDelgado-hm6sg]

Muchas gracias!

[@RsrT800]

Solo una inquietud: Cómo detectar y asignar el default language a través, tal vez por el idioma del navegador, o del móvil que está corriendo la app? Muchas gracias y felicitaciones!

[@AgustinNavarroGaldon]

Puedes obtener el lenguaje del navegador asi. var idioma = navigator.language || navigator.userLanguage;

[@ttvhuskyy3679]

Para que sirve interpolation: escapeValue: false ?

[@AgustinNavarroGaldon]

Permite integrar valores dinámicos en sus traducciones.

[@kevin101294]

Buen video!! me suscribo

[@AgustinNavarroGaldon]

Gracias!

[@edwingonzalez1959]

Excelente maestro , muy bien explicado , tengo una duda que ya otras personas han preguntado , pero no estoy claro , la traduccion unicamente aplica para el titulo , no para el resto es decir no cambia el mensaje (edit src / App.js and save to reload ) , no se si me explico o estoy un error .

[@AgustinNavarroGaldon]

Con esto puedo traducir cualquier texto que carguen tus componentes, claramente se puede hacer mucho más lo que he mostrado en el vídeo es un poco de todas las posibilidades que tiene.

[@carloscagnamendoza8575]

gracias buen video.

[@AgustinNavarroGaldon]

Gracias a ti

[@martinfake3]

gracias genio te amo!

[@AgustinNavarroGaldon]

De nada jajaja ☃️

[@rodrigodavid3957]

Hola, muy interesante, pero a mi no me funciona. Cuando agrego el {t("header.hello-word")} en la etiqueta, me aparece tal cual en pantalla, o sea en pantalla me muestra el siguiente texto: header.hello-word y no el texto que debe ser

[@AgustinNavarroGaldon]

Voy a revisarlo.

[@oscargm1979]

Ya cambió la ruta donde debes poner los JSON con las traducciones.Ahora es en public/locales/en/global.json ó public/locales/es/global.json etc.Es decir que van en public/locales

[@s1art7]

hola tngo una pagina nasa q desde la api , me devuelve data en ingles y quisiera traducir la información de modo q se renderice en spañol, sabrías como ayudarme? gracias 🙌🏼

[@AgustinNavarroGaldon]

¿La Api es tuya?

[@franciscodiazdeheza6761]

Agus puede haber un solo boton que modifique todos los archivos en una carpeta components? de ser asi como seria

[@AgustinNavarroGaldon]

Puedes hacer un script con gulp.

[@haroldlopez152]

parcero y cómo seria en el caso de React Native?

[@AgustinNavarroGaldon]

Casi parecido, grabare un video montandolo

[@ricardomarin8019]

Hola, sabes como podría llevar un archivo de lenguaje por componente?

[@AgustinNavarroGaldon]

Te recomiendo usar gulp para eso

[@amadsaed1012]

está clarisimo , gracias

[@AgustinNavarroGaldon]

De nada :D

[@juanestebangarciaescobar450]

Para una app móvil, es el mismo proceso ?

[@AgustinNavarroGaldon]

Muy similar.

[@ricardo130695]

Muchas gracias c:

[@AgustinNavarroGaldon]

De nada

[@richardhero3689]

buen dia, me arroja error de "React Hook "UseTraslation" cannot be called in a class... sabes que podria ser o porque se genera este error?

[@AgustinNavarroGaldon]

¿Te sale algo mas?

[@richardhero3689]

@@AgustinNavarroGaldon encontre el error, es que en tu ejemplo lo haces apra "Function" y yo lo estoy aplicando en "class component", ya lo solucione

[@emilricardo728]

gracias!! me salvaste!

[@AgustinNavarroGaldon]

Me alegro mucho jejeje

[@pcyglesias]

Consulta maestro. Si quisiera trabajar lenguajes en NextJs con i18Next en teoría tendría que usar rosetta o bien lo puedo utilizar i18next de la misma maneja que lo enseñas en el video?

[@AgustinNavarroGaldon]

Si que puedes pero next 10 ya incluye su propio sistema de traducciones

[@pcyglesias]

@@AgustinNavarroGaldon cool, voy jugar un poco más

[@stephan3199]

CRACK. Estaria bueno un tutorial como este pero para aplicarlo en Gatsby. Saludos!

[@AgustinNavarroGaldon]

Me lo apunto para grabarlo

[@sarrak84]

Hola! tengo este fallo... y ahora mismo no se me ocurre porqué! puede ser alguna tontería porque es tarde y estoy un poco cansado, pero no lo encuentro!!! i18n.changeLanguage("ES"); TypeError: i18n.changeLanguage is not a function

[@Max-ig8qd]

Muchas gracias! Entendí perfecto. Pero me salta un error y no logro saber de dónde es. Hice todo tal cual el video. Este es el error: "Error: Invalid hook call. Hooks can only be called inside of the body of a function component."

[@AgustinNavarroGaldon]

Revisa si estás llamando un hook de React en algún sitio que no toca

[@haroldlopez152]

tu error es porque tu código son class components y no functions. Tengo el mismo problema con un proyecto viejo.

[@martinposniak9772]

Hola agustin como estas? El problema que me está pasando, es que cuando en mi proyecto hecho con react, si bien de manera local las traducciones funcionan correctamente, cuando utilizo el comando npm run build y hago el deployment, en la transpilación, los archivos json no son guardados en mi build ( o dist en todo caso) y luego me parece que en mi proyecto (luego de haber hecho el deployment) no me está leyendo esos archivos json, debido a que no fueron guardados en el directorio build o dist. Como podría solucionar esto? Gracias!

[@cecimanzur45]

Hola! Me pasó lo mismo. Pudiste resolverlo? Yo no sé cómo resolverlo aún

[@jommartinez_]

Hola Agustín, como se podría pasar esto a gatsby con graphql Cogiendo los datos desde un cms externo con Wpml por ejemplo y wordpress?

[@AgustinNavarroGaldon]

Aqui es WP el que tiene que hacer las traduciones.

[@GuillermoRodriguez-dg4fu]

Gracias 👍

[@AgustinNavarroGaldon]

De nada :D

[@danielramirezhuayanay6470]

y si quiero usar redux, que provider envuelve a cual?

[@AgustinNavarroGaldon]

Redux envuelve todo

[@llucho]

Se puede aplicar para una aplicación hecha con Javascript puro?

[@AgustinNavarroGaldon]

Claro.

[@NANAPATY]

Hola, mil gracias por el tutorial muy bien explicado... tengo una pregunta, como haría para poder traducir información que está en otro archivo data?, tengo un proyecto con información de otros proyectos que estan mapeados y no supe como hacer para unificar esa información, alguna otra forma de hacer ese proceso?. Mil gracias

[@PROGAMERXable]

si la información es dinamica (osea que constantemente esta cambiando), deberías traducirlo desde el backend y servirlo ya traducido con parametros de la url, ejm: localhost:3000/en/, y si la información es estatica, pues parseala a .json y guardala en archivos .json para que puedan ser compatibles con esta libreria.

[@NANAPATY]

Gracias bueno está en un archivo json local pero no es el mismo de las traducciones, es otro... ahí como sería. Gracias

[@AgustinNavarroGaldon]

Puedes adaptarlos con GULP

[@NANAPATY]

@@AgustinNavarroGaldon jajaja ok, bueno es q soy nueva en esto y no tengo idea de que es GULP, revisaré información a respecto. Gracias

[@pabloDevVR]

Muy buen video, solo una duda. Como puedo traducir texto dentro de un componente? porque por lo visto useTranslation no funciona

[@AgustinNavarroGaldon]

Se traduce igual

[@haroldlopez152]

@@AgustinNavarroGaldon no amigo, no es igual. Tengo un proyecto y useTranslations solo funciona en arroy functions, no en class components como pregunta el del comentario. Adicional a esto, al hacer transiciones entre componentes se cambia el lenguaje seleccionado al predeterminado (rjrmplo despues de un login)

[@recusantray]

Esto es con la última versión de i18next-react?

[@AgustinNavarroGaldon]

Si, es de las ultimas versiones.

[@marceloveron2393]

Me parece muy rebuscado depender de esa libreria para eso que hace, no es mas facil hacer una funcion, la cual el primer parametro se le pase el JSON , y de segundo parametro el tipo de lenguaje y retornar el JSON con el lenguaje deseado ?

[@dabiun7443]

No

[@nacholowkey]

es mas facil y mejor en mi opinion usar context

gracias

[@AgustinNavarroGaldon]

De nada

[@haroldlopez152]

no funciona para class components.

[@AgustinNavarroGaldon]

Es hora de pasar a hooks 😪

[@baneymelo7468]

me parece de poco valor esa libreria, eso se puede hacer sin necesidad de esas dependencias, ¿existe algo que TRADUZCA y no que cambie de idioma? La idea es traducir un texto en tiempo real, no crear archivos previamente traducidos y solo cambiarlo, y obviamente que sean free y no con API_KEY de pago/trial.

[@aarongarcia1218]

ya tienes ese dato ? tambien me gustaría saber

[@AgustinNavarroGaldon]

Probar de otra manera.

[@AlexTeercero]

Siento que he perdido el tiempo con este video la verdad culpa mia de ver un video de hace varios anios pero esta importacion no existe I18nextProvider en ningun sitio de la documentacion

[@AgustinNavarroGaldon]

Como tú dices el vídeo tiene 2 años y la tecnología cambia

[@luquiriver]

videazo maestro!!! me gustaría saber como aplicar el sistema de traducciones pero con un cambio de dirección en la URL (ej: adidas.com/es/inicio)

[@AgustinNavarroGaldon]

Para esto tendrías que tener un generador de rutas según las traducciones.

[@luisangelmendozachate]

Me sirvió mucho, gracias

[@AgustinNavarroGaldon]

De nada!