En lugar de usar el flatMap de lodash se puede usar el método flatMap de los arrays:
const paths: PathType[] = slugs
.map((slug) => ({ params: { slug } }))
.flatMap((path) => locales.map((locale) => ({ locale, ...path })))
Introducción
Qué es internacionalización y localización
Arquitectura
Arquitectura de internacionalización para contenido en JavaScript
Agregando locales a nuestro contenido y Rutas Internacionalizadas
Rutas i18n
Rutas internacionalizadas y páginas no-dinámicas (Home)
Rutas Internacionalizadas en páginas dinámicas con getStaticPath()
Experiencia de usuario
Detección de idioma automática y next/link
Elección de idioma para el usuario a través de API Next.js
Arquitectura React
Arquitectura de internacionalización para labels en JavaScript
Arquitectura de internacionalización para componentes en React
Nuestra aplicación completamente traducida
Próximos pasos
Retos y trade-offs
Continúa con el Curso de Next.js: Grandes Datasets
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
La internacionalización es una necesidad creciente en el desarrollo web moderno, permitiendo a las aplicaciones comunicarse con usuarios de diferentes idiomas y culturas. En esta guía, exploraremos cómo gestionar la internacionalización en páginas dinámicas con Next.js, asegurando que nuestra API se conecte correctamente y que las páginas apropiadas se generen para cada idioma o locale. Aprenderemos a ajustar get static paths y get static probs para incluir múltiples idiomas, utilizando TypeScript y herramientas adicionales como Lodash.
Las páginas dinámicas son aquellas que se generan en función de parámetros variables, como podrían ser entradas de usuario o datos de una API. En Next.js, la gestión de estos parámetros se realiza a través de get static paths. Esta función especifica qué páginas dinámicas o rutas deben generarse de forma estática durante el build.
Al añadir soporte para múltiples idiomas en una aplicación Next.js, debemos ajustar la configuración para incluir todos los locales deseados. Estos son pasos clave que se deben seguir:
En TypeScript, al manejar configuración de locale, podría parecer desconocido para el compilador. Por ejemplo, sin configuraciones adecuadas, locale podría ser interpretado como indefinido. Para solucionarlo:
string
.Lodash es una biblioteca JavaScript extremadamente útil para trabajar con arrays y objetos complejos. En nuestro caso, utilizamos su función flatMap para gestionar estructuras de datos más complejas cuando generamos varias páginas para cada idioma:
import flatMap from 'lodash/flatMap';
const locales = ['en', 'es']; // Ejemplo de locales disponibles
const paths = flatMap(entries, entry => {
return locales.map(locale => ({
params: { slug: entry.slug },
locale,
}));
});
Esta función toma una matriz de datos de entrada y genera rutas para cada combinación de entry y locale, estructurándolo en un solo nivel de profundidad.
La función get static props debe modificarse para pasar el locale actual a cualquier API que esté trayendo contenido localizado. Esto asegura que los datos devueltos estén en el idioma correcto:
Después de ajustar tus páginas y aplicaciones para la internacionalización, es vital verificarlas en un navegador:
Por último, un aspecto a considerar es cómo detectar automáticamente el locale del usuario. Esto podría mejorarse al determinar automáticamente las preferencias de idioma basadas en configuraciones del navegador o direcciones IP. A medida que avanzas, reflexiona cómo podrías implementar detecciones automáticas para proporcionar a los usuarios una experiencia más intuitiva y localizada desde el momento en que visitan el sitio por primera vez.
Aportes 2
Preguntas 0
En lugar de usar el flatMap de lodash se puede usar el método flatMap de los arrays:
const paths: PathType[] = slugs
.map((slug) => ({ params: { slug } }))
.flatMap((path) => locales.map((locale) => ({ locale, ...path })))
Probablemente lo comenten en la siguiente clase, pero se me ocurre que para obtener las preferencias de lenguaje del usuario podemos acceder a:
navigator.language
// "es-MX"
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?