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
Introducción
Internacionalización en Next.js: Soporte de Múltiples Idiomas
Arquitectura
Arquitectura Internacionalización con Next.js y Contentful
Rutas Internacionalizadas en Next.js con Contentful
Rutas i18n
Localización de Páginas Dinámicas con Next.js y Contentful
Páginas Dinámicas con Next.js y Múltiples Locales
Experiencia de usuario
Internacionalización de Next.js: Configuración de Idiomas y Cookies
Selección de idioma con Next.js y cookies en aplicaciones web
Arquitectura React
Internacionalización de Labels en JavaScript con Next.js
Internacionalización en React y Next.js con Context y Hooks
Programación Orientada a Objetos en JavaScript: Clases y Prototipos
Próximos pasos
Optimización de Performance en Aplicaciones Internacionalizadas
Internacionalización con Next.js: Estrategias y Mejores Prácticas
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Git tag: 8-locales-app
Comando: git checkout -b dev 8-locales-app
Aportes 5
Preguntas 2
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:
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?