Internacionalización en React con Next.js y i18next

Clase 10 de 12 • Curso de Next.js: Internacionalización de Aplicaciones Web con i18n

Contenido del curso

Introducción

1
Internacionalización Web con Next.js: Arquitectura y Prácticas Clave
09:27 min

Arquitectura

Rutas i18n

4
Implementación de Localización en Páginas Estáticas con Next.js y Contentful
04:04 min
5
Internacionalización en Next.js: Gestión de Páginas Dinámicas y Locales
10:07 min

Experiencia de usuario

Arquitectura React

Próximos pasos

Tomar examen

Resumen

Git tag: 8-locales-app Comando: git checkout -b dev 8-locales-app

Comentarios

Christian Diaz Portela Flores

student•

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

Cristian Iñiguez

student•

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)

Reynaldo Francisco Moreno Briceño

student•

Gracias bro! estaba estancando en un bug y esto lo soluciono

Alejandro Iscop

student•

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>
            );
         })}
</>

)

Jair Neri

student•

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:

locale contains the currently active locale.
locales contains all configured locales.
defaultLocale contains the configured default locale. When pre-rendering pages with getStaticProps or getServerSideProps, the locale information is provided in the context provided to the function.

When leveraging getStaticPaths, the configured locales are provided in the context parameter of the function under locales and the configured defaultLocale under defaultLocale.

Johnny Gómez

student•

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 ?

Carlos Miguél Correa Millán

student•

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?

Jonathan 🦑 Alvarez

teacher•

i Hola Carlos, te respondí en Twitter, cuéntanos como te fue con eso? :D

https://twitter.com/jonalvarezz/status/1467255443768676355?s=20

Carlos Miguél Correa Millán

student•

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

Diego Valdez Acosta

student•

Con Next ahora se recomienda hacer uso de esta variación: https://github.com/i18next/next-i18next

// 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)

    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>
            );
         })}
</>

Internacionalización en React con Next.js y i18next

Introducción

Internacionalización Web con Next.js: Arquitectura y Prácticas Clave

Arquitectura

Arquitectura de Aplicaciones con Internacionalización en Next.js

Internacionalización en NextJS: Configuración y Estrategias de Rutas

Rutas i18n

Implementación de Localización en Páginas Estáticas con Next.js y Contentful

Internacionalización en Next.js: Gestión de Páginas Dinámicas y Locales

Experiencia de usuario

Internacionalización de Idiomas con Next.js y Cookies

Selector de Idioma en Next.js con Cookies y API Personalizada

Arquitectura React

Internacionalización de Labels en Next.js con JSON

Internacionalización en React y Next.js: Estrategias y Soluciones

Internacionalización en React con Next.js y i18next

Próximos pasos

Retos de Internacionalización en Aplicaciones React

Internacionalización con Next.js y JavaScript Avanzado