Internacionalización en React con Next.js y i18next
Curso de Next.js: Internacionalización de Aplicaciones Web con i18n
Contenido del curso
Git tag: 8-locales-app Comando: git checkout -b dev 8-locales-app
Christian Diaz Portela Flores
Cristian Iñiguez
Reynaldo Francisco Moreno Briceño
Alejandro Iscop
Jair Neri
Johnny Gómez
Carlos Miguél Correa Millán
Jonathan 🦑 Alvarez
ProfesorCarlos Miguél Correa Millán
Diego Valdez Acosta
La librería que debemos utilizar es 'next-18next' ya que esta tiene soporte para SSR.
yarn add next-i18next
Les dejo el enlace a la documentación
Creo que ahora tenemos que crear un archivo next-i18next.config.js con la configuración de i18n de next.config.js:
// next-i18next.config.js module.exports = { i18n: { locales: ['en-US', 'es'], defaultLocale: 'en-US', }, }
Para no repetir estos valores podemos importarlos desde next.config.js:
// next.config.js const { i18n } = require('./next-i18next.config') const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }) const config = { future: { webpack5: true, }, images: { domains: ['images.ctfassets.net'], }, i18n, } module.exports = withBundleAnalyzer(config)
Gracias bro! estaba estancando en un bug y esto lo soluciono
TopArea.tsx
const { locales, locale, asPath } = useRouter() const { t } = useTranslation(['common']) // Locales aren't configured if (locales == undefined || locale == undefined) { return null } return ( <> {t('language')}: {locales.map((loc, i) => { return ( <span key={i} className={loc === locale ? 'bgindigo-500' : ' '}> <Link href={asPath} locale={loc}> {loc} </Link> </span> ); })} </>
)
Doc NextJs Accessing the locale information Accessing the locale information You can access the locale information via the Next.js router. For example, using the useRouter() hook the following properties are available:
When leveraging getStaticPaths, the configured locales are provided in the context parameter of the function under locales and the configured defaultLocale under defaultLocale.
Hola querida comunidad de Platzi 😄, me gustaría su apreciada ayuda 🙏, al momento de cambiar el idioma me sale el siguiente error
Error: You can not use getInitialProps with getStaticProps. To use SSG, please remove your getInitialProps /_error
Revisé el archivo _error.tsx y tengo el mismo código que en la sección de recursos. Creo que tal vez sea por que estoy usando la versión 12 de Next pero.. ¿ Cómo podría arreglar esto si quitar la capacidad de traducción de la página _error.tsx ?
Buenas la traduccion en local funciona correctamente pero al llevarla a produccion queda en blanco la pagina es un problema que tiene tambien la app que subes, cual seria una manera de solucionar esto?
i Hola Carlos, te respondí en Twitter, cuéntanos como te fue con eso? :D
https://twitter.com/jonalvarezz/status/1467255443768676355?s=20
En mi caso use ni18n y me lei lo documentacion de nextjs y vi que puedo transicionar de locales con <Link> pasandole el locale como un prop
Con Next ahora se recomienda hacer uso de esta variación: https://github.com/i18next/next-i18next
