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 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!!!!
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.
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?
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 .
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.
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!
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?
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.
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
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.
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?
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
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
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
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!
@@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)
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 🙌🏼
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."
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
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
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 ?
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.
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
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
![Crear app multiidioma con REACT NEXT [i18n]](http://i.ytimg.com/vi/o9fpXJdarOc/mqdefault.jpg)
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
De nada 😇
Eres gigantesco brother, llevaba una semana atrancado con errores, y en solo 15 minutos con tu ayuda logre hacerlo todo.
Me alegra muchísimo crack!!!
Muy bien explicado. Muchas gracias. No conocía este método de cómo hacer el cambio de idioma. 💯👍
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
De nada es lo minimo que puedo hacer =)
Consulta, como lo completas al json si tenes ya la aplicacion armada? O sea con la cantidad de texto que tenes que traducir
Puedes usar gulp cara crear script y conectar con un servidor en cloud de traducciones
Bravooo !!! Perfectamente explicado y claro aunque el español no es mi idioma nativa !!! Gracias 😊
Este video es oro puro. Impecable!
domingo 18 abril, 2021 13:31pm sigue funcionando a la perfeccion :), muchisimas gracias
Crack!
Buen video que va al punto... simple, cortito y al pie! Gracias por este graan video!! Me suscribo!
Gracias a ti!
Eres todo un Crack, GRACIAS.
Gracias 😊
Sos un genio Agustín! Gracias por este y muchos videos más!! He comprado alguno de tus cursos, y me encanta como explicas
Muchísimas gracias crack, me alegra que te estén gustando =)
@@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!!!!
Que buena expliación! Muchas gracias
Excelente explicación, me sirvió muchísimo. Muchas gracias!
si q me has salvado la vida tio!!
Gracias por el video, me ha servido mucho. Veo que tienes la terminal personalizada, ¿como podría personalizarla igual? Queda muy chula
Mil gracias, estaba teniendo problemas con los imports de los JSON. :D
De nada 😇
muchas gracias por este video!!!!!!! me sirvió una banda!!
Con mucho gusto crack!
He aprendido mucho con tus cursos y videos
¡Me alegro mucho leer eso, recuerda luego practicar por tu cuenta para ir mejorando! la constancia hace al maestro!
@@AgustinNavarroGaldon gracias lo seguiré haciendo
crack!.. siempre claro
Gracias 🤩
bueniiiisma explicacion
Muy útil, muchas gracias Agustin!
De nada 😊
Increíble, muy buena explicación! Gracias!
De nada, es un placer.
@@AgustinNavarroGaldon Pregunta, sabes si hay alguna manera de que la transición entre lenguajes sea más suave?
Buen trabajo chaval! sigue así! muy útil!
Muchas gracias 😊
Gracias por tu contenido, explicas de maravilla!
Muchas gracias 😊
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.
Si es app grande recomiendo el uso de servicios de terceros como puede ser lokalize para gestionar las traduciones.
Muchas gracias!
super!, me sirvió muchisimo, muy clara tu explicación
Me alegro mucho :D
Gran video!!!
Genial justo lo que estaba buscando 🙌
Me alegro poder ayudarte 😇
muy bien la explicación gracias!
Gracias 😇
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!
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?
Si son datos dinámicos tendrás que integrar un sistema de tradiciones desde el backend.
Muy buen video!!!
Gracias crack!
¡Gracias! Súper bien explicado :D
Es un placer
gracias buen video.
Gracias a ti
Buen vídeo colega
Buenisimo bro, muchas gracias
De nada 😇
está clarisimo , gracias
De nada :D
Muchas gracias c:
De nada
Gracias 👍
De nada :D
gracias!! me salvaste!
Me alegro mucho jejeje
gracias genio te amo!
De nada jajaja ☃️
Yo ya tengo contenido en mis paginas, yo tendria que copiar cada texto en una pagina global.json ?
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 .
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.
grande el jeader
gracias
De nada
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!
Puedes obtener el lenguaje del navegador asi.
var idioma = navigator.language || navigator.userLanguage;
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?
Si que puedes pero next 10 ya incluye su propio sistema de traducciones
@@AgustinNavarroGaldon cool, voy jugar un poco más
y para que el boton afecte otros componentes como seria? soy nuevo
Se puede usar alguna librería de google traductor para que traduzca automáticamente?
Puedes probar el siguiente repo.
github.com/noahjohn9259/react-google-translate
Amigo, para hacerlo con react native cambia mucho ?
Es muy parecido
CRACK. Estaria bueno un tutorial como este pero para aplicarlo en Gatsby. Saludos!
Me lo apunto para grabarlo
¿Que pasa cuando es información que viene de base de datos? Que va cambiando?
Usa un servicio como lokalize
Buen video!! me suscribo
Gracias!
Para una app móvil, es el mismo proceso ?
Muy similar.
funciona con react router? si yo cambio el idioma en la pagina de inicio y me muevo a otra, vuelve al idioma original?
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.
parcero y cómo seria en el caso de React Native?
Casi parecido, grabare un video montandolo
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
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.
Gracias bueno está en un archivo json local pero no es el mismo de las traducciones, es otro... ahí como sería. Gracias
Puedes adaptarlos con GULP
@@AgustinNavarroGaldon jajaja ok, bueno es q soy nueva en esto y no tengo idea de que es GULP, revisaré información a respecto. Gracias
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?
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
Para que sirve interpolation: escapeValue: false ?
Permite integrar valores dinámicos en sus traducciones.
Se puede aplicar para una aplicación hecha con Javascript puro?
Claro.
Hola, sabes como podría llevar un archivo de lenguaje por componente?
Te recomiendo usar gulp para eso
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
Para eso tendrías que usar un servicio de traducciones
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
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!
Hola! Me pasó lo mismo. Pudiste resolverlo? Yo no sé cómo resolverlo aún
Agus puede haber un solo boton que modifique todos los archivos en una carpeta components? de ser asi como seria
Puedes hacer un script con gulp.
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?
Aqui es WP el que tiene que hacer las traduciones.
Muy buen video, solo una duda. Como puedo traducir texto dentro de un componente? porque por lo visto useTranslation no funciona
Se traduce igual
@@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)
y si quiero usar redux, que provider envuelve a cual?
Redux envuelve todo
Esto es con la última versión de i18next-react?
Si, es de las ultimas versiones.
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?
¿Te sale algo mas?
@@AgustinNavarroGaldon encontre el error, es que en tu ejemplo lo haces apra "Function" y yo lo estoy aplicando en "class component", ya lo solucione
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 🙌🏼
¿La Api es tuya?
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."
Revisa si estás llamando un hook de React en algún sitio que no toca
tu error es porque tu código son class components y no functions. Tengo el mismo problema con un proyecto viejo.
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
Voy a revisarlo.
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
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 ?
No
es mas facil y mejor en mi opinion usar context
no funciona para class components.
Es hora de pasar a hooks 😪
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.
ya tienes ese dato ? tambien me gustaría saber
Probar de otra manera.
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
Como tú dices el vídeo tiene 2 años y la tecnología cambia
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
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)
Para esto tendrías que tener un generador de rutas según las traducciones.
Me sirvió mucho, gracias
De nada!