No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Nuestra aplicaci贸n completamente traducida

10/12
Recursos

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

Aportes 4

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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)

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.

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

)