No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Adquiere por un año todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/año

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
1H
43M
11S

Nuestra aplicación completamente traducida

10/12
Recursos

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

Aportes 5

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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)

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:

  • 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.

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