Internacionalización de Sitios con Next.js: La Guía Definitiva

En un mercado globalizado, limitar tu sitio a un solo idioma es dejar dinero sobre la mesa. Crear un sitio multilingüe permite alcanzar nuevos mercados y clientes.

Recientemente, refactoricé este portafolio para soportar Portugués, Inglés y Español. Aquí está cómo lo hice.

1. Enrutamiento por Sub-ruta (Sub-path Routing)

La mejor estrategia para SEO es tener URLs dedicadas para cada idioma:

• misitio.com/pt
• misitio.com/en
• misitio.com/es

Esto permite que Google indexe cada versión independientemente.

2. Estructura de Carpetas en App Router

En Next.js 13+, usamos Carpetas Dinámicas ([lang]) para capturar el idioma en la URL:

src/app/[lang]/
  layout.tsx
  page.tsx (Home)
  about/
    page.tsx

3. Diccionarios de Traducción

En lugar de codificar textos, creamos archivos JSON para cada idioma:

// en.json
{
  "welcome": "Welcome to my portfolio",
  "contact": "Contact Me"
}

Y una función de utilidad para cargar el diccionario correcto basado en el parámetro lang de la URL.

4. Middleware para Redirección

Usamos un Middleware (ahora Proxy) para detectar el idioma preferido del navegador del usuario y redirigirlo automáticamente si accede a la raíz /.

Conclusión

Internacionalizar un proyecto Next.js requiere planificación inicial, pero el resultado es una arquitectura escalable lista para el mundo.

¿Quieres expandir tu negocio al mercado internacional? Hablemos.