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 鈥榥ext-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