En este artículo explico el proceso de optimización del manejo de locales en una aplicación Next.js. La implementación inicial usaba cookies para determinar el idioma, lo que obligaba a renderizar de forma dinámica y afectaba negativamente al rendimiento y al SEO. Al migrar a un enrutamiento basado en locales, donde el idioma se incluye directamente en la ruta URL como por ejemplo /en/about o /ja/about, Next.js puede pre-renderizar rutas específicas por idioma en tiempo de compilación, recuperando así las ventajas de la generación estática y mejorando tiempos de carga y posicionamiento en buscadores.
1. Configuración de locales Crear un archivo central que defina los locales disponibles y el idioma por defecto simplifica la gestión y facilita añadir o eliminar idiomas en el futuro. Esta configuración unificada mejora la reutilización de código y reduce errores al referenciar idiomas en distintos módulos.
2. Estrategia de enrutamiento Incrustar el locale en la ruta permite que cada ruta por idioma sea estática y pre-renderizable. Es importante decidir si el prefijo de idioma aparece siempre, nunca o solo cuando es necesario, ya que esto afecta a la estructura de URLs y al SEO. Por ejemplo, mostrar /en/about y /ja/about trata cada par como páginas estáticas independientes, lo que hace las URLs compartibles y indexables por buscadores.
3. Navegación centralizada Crear helpers de navegación que respeten el enrutamiento por locales evita comportamientos inconsistentes al usar enlaces o navegación programática. Con helpers personalizados, componentes como Link o funciones de redirección aplican el locale correcto automáticamente.
4. Resolución de locale en servidor En el lado del servidor se debe resolver el locale correcto a partir de la request y cargar los ficheros de mensajes correspondientes. Es recomendable validar que el locale solicitado sea soportado y en caso contrario caer en el locale por defecto para evitar errores y servir contenido válido.
5. Layout raíz y generación estática En el layout raíz se indica a Next.js cuál es el locale actual para habilitar el pre-renderizado estático de cada variante lingüística. Generar parámetros estáticos por cada locale permite que el framework cree páginas SSG por idioma y que el HTML resultante incluya el atributo lang adecuado, mejorando accesibilidad y SEO.
6. Selector de idioma en cliente Implementar un conmutador de idioma que use el router para navegar a la misma ruta con otro locale proporciona una experiencia de usuario fluida. Al cambiar de idioma la URL se actualiza a la ruta correspondiente, por ejemplo de /en/about a /ja/about, lo que mantiene la coherencia de enlaces compartidos y marcadores.
7. Manejo de rutas inválidas Añadir una ruta catch all que capture peticiones que no coincidan con rutas válidas o con locales no soportados permite redirigir a una página de not found y mantener una navegación predecible y segura.
Conclusión Pasar de un sistema de locales basado en cookies a un enrutamiento basado en URL restaura la generación estática, mejora el rendimiento y potencia el SEO sin sacrificar la experiencia multilingüe. Esta estructura modular facilita añadir nuevos idiomas y mantiene el enrutamiento consistente en toda la aplicación.
En Q2BSTUDIO somos especialistas en desarrollo de software y aplicaciones a medida, y aplicamos buenas prácticas de internacionalización en proyectos que requieren escalabilidad y rendimiento. Ofrecemos servicios de creación de desarrollo de aplicaciones a medida y soluciones de inteligencia artificial para empresas, combinando experiencia en software a medida, inteligencia artificial, ciberseguridad y servicios cloud aws y azure. También implementamos servicios de inteligencia de negocio y Power BI para mejorar la toma de decisiones, y desarrollamos agentes IA y automatizaciones que aceleran procesos internos.
Si tu proyecto necesita una arquitectura multilingüe optimizada, mejor rendimiento y mejor posicionamiento, en Q2BSTUDIO podemos ayudarte con soluciones de software a medida, ciberseguridad, servicios cloud y analítica avanzada para llevar tu producto al siguiente nivel.
