Il middleware rileva automaticamente le preferenze linguistiche dell’utente e lo reindirizza alla versione localizzata appropriata del tuo sito. Usa le impostazioni del browser, la geolocalizzazione e le preferenze dell’utente per fornire la lingua corretta prima che venga caricato qualsiasi contenuto.

Configurazione

Passaggio 1: crea una route dinamica

Crea una directory [locale] nella cartella app/ e sposta al suo interno tutte le pagine:

Passaggio 2: Aggiungi il middleware

Crea middleware.ts nella radice del progetto:

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

export default createNextMiddleware();

export const config = {
  // Corrisponde a tutti i percorsi tranne le route API, i file statici e gli elementi interni di Next.js
  matcher: ['/((?!api|static|.*\\..*|_next).*)']
};

Questo consente il rilevamento automatico della lingua e l'instradamento degli URL con prefissi di locale come /en/about, /es/about.

Rilevamento della lingua

Il middleware determina le preferenze linguistiche dell’utente in questo ordine:

1. Locale nell’URL - /es/about → spagnolo
2. Cookie utente - Lingua selezionata in precedenza
3. Intestazioni del browser - Header Accept-Language
4. Locale predefinito - Lingua di fallback configurata

Il middleware gestisce automaticamente il rilevamento della lingua del browser e la persistenza dei cookie senza ulteriori configurazioni.

Percorsi localizzati

Personalizza i percorsi degli URL per le diverse lingue:

export default createNextMiddleware({
  pathConfig: {
    // Inglese: /en/products, Cinese: /zh/产品
    "/products": {
      "zh": "/产品"
    },
    
    // Percorsi dinamici: /en/product/123, /zh/产品/123
    "/product/[id]": {
      "zh": "/产品/[id]"
    }
  }
});

Struttura degli URL

Per impostazione predefinita, la lingua predefinita non verrà preceduta da un codice locale:

/about     → /about        (locale predefinita: inglese)
/about     → /es/about     (spagnolo)
/about     → /fr/about     (francese)

Aggiungere un prefisso alla lingua predefinita

Per aggiungere un prefisso a tutte le lingue, inclusa quella predefinita:

export default createNextMiddleware({
  prefixDefaultLocale: true
});

Risultato:

/about     → /en/about     (inglese, con prefisso)
/about     → /es/about     (spagnolo, con prefisso)
/about     → /fr/about     (francese, con prefisso)

Problemi comuni

Rotta dinamica mancante

Tutte le pagine devono trovarsi all'interno di [locale]/:

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

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

Configurazione del matcher

Escludi le route API e i file statici:

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

Prossimi passaggi

• Guida SSG - Generazione statica con routing per le localizzazioni
• Supporto RTL - Lingue scritte da destra verso sinistra
• Riferimenti API: