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

Configuración

Paso 1: Crear una ruta dinámica

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

Paso 2: Añadir middleware

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

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

export default createNextMiddleware();

export const config = {
  // Coincidir 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 URLs con prefijos de locale como /en/about y /es/about.

Detección de idioma

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

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

El middleware gestiona automáticamente la detección del idioma del navegador y la persistencia de cookies 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 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 la 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 API y los archivos estáticos:

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

Próximos pasos

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