El middleware detecta automáticamente las preferencias de idioma del usuario y lo redirige a la versión localizada adecuada de tu sitio. Utiliza la configuración del navegador, la geolocalización y las preferencias del usuario para mostrar el idioma correcto antes de que se cargue ningún contenido.

Configuración

Paso 1: Crear ruta dinámica

Crea un directorio [locale] en tu carpeta app/ y mueve todas las páginas dentro de él:

Paso 2: Agregar Middleware

Crea proxy.ts en la raíz de tu proyecto:

import { createNextMiddleware } from 'gt-next/middleware';

export default createNextMiddleware();

export const config = {
  // Coincide con todas las rutas excepto las rutas de API, archivos estáticos e internos de Next.js
  matcher: ['/((?!api|static|.*\\..*|_next).*)']
};

Esto permite la detección automática del idioma y el enrutamiento de URL con prefijos de locale como /en/about, /es/about.

Detección de idioma

El middleware detecta las preferencias de idioma del usuario en este orden:

1. URL locale - /es/about → español
2. Cookie del usuario - Selección de idioma anterior
3. Encabezados del navegador - Cabecera Accept-Language
4. Default locale - Idioma de contenido de respaldo predeterminado configurado

El middleware gestiona automáticamente la detección del idioma del navegador y la persistencia de la cookie sin configuración adicional.

Rutas localizadas

Personaliza las rutas de URL para distintos idiomas:

export default createNextMiddleware({
  pathConfig: {
    // Inglés: /en/products, Chino: /zh/产品
    "/products": {
      "zh": "/产品"
    },
    
    // Rutas dinámicas: /en/product/123, /zh/产品/123
    "/product/[id]": {
      "zh": "/产品/[id]"
    }
  }
});

Estructura de URL

De forma predeterminada, tu locale predeterminado no llevará un prefijo con un código de configuración regional:

/about     → /about        (locale predeterminado: inglés)
/about     → /es/about     (español)
/about     → /fr/about     (francés)

Agregar un prefijo al locale predeterminado

Para agregar un prefijo a todos los locales, incluido el predeterminado:

export default createNextMiddleware({
  prefixDefaultLocale: true
});

Resultado:

/about     → /en/about     (inglés, con prefijo)
/about     → /es/about     (español, con prefijo)
/about     → /fr/about     (francés, con prefijo)

Problemas frecuentes

Falta una ruta dinámica

Todas las páginas deben estar dentro de [locale]/:

❌ Incorrecto:
app/
├── page.tsx
└── about/page.tsx

✅ Correcto:
app/
└── [locale]/
    ├── page.tsx
    └── about/page.tsx

Configuración del matcher

Excluye las rutas de la API y los files estáticos:

export const config = {
  matcher: ['/((?!api|static|.*\\..*|_next).*)']
};

Próximos pasos

• Guía de SSG - Generación estática con enrutamiento por locale
• Compatibilidad con RTL - Idiomas de derecha a izquierda
• Referencia de API: