Programación Orientada a Objetos en JavaScript: Clases y Prototipos

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