Le middleware détecte automatiquement les préférences linguistiques de l’utilisateur et le redirige vers la version localisée appropriée de votre site. Il s’appuie sur les paramètres du navigateur, la géolocalisation et les préférences de l’utilisateur pour proposer la bonne langue avant le chargement de tout contenu.

Configuration

Étape 1 : Créer une route dynamique

Créez un répertoire [locale] dans votre dossier app/, puis déplacez-y toutes les pages :

Étape 2 : Ajouter le middleware

Créez middleware.ts à la racine de votre projet :

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

export default createNextMiddleware();

export const config = {
  // Correspond à tous les chemins sauf les routes d'API, les fichiers statiques et les éléments internes de Next.js
  matcher: ['/((?!api|static|.*\\..*|_next).*)']
};

Cela permet la détection automatique de la langue et le routage des URL avec des préfixes de locale, par exemple /en/about, /es/about.

Détection de la langue

Le middleware détecte les préférences linguistiques de l’utilisateur dans l’ordre suivant :

1. Locale dans l’URL - /es/about → espagnol
2. Cookie utilisateur - Langue précédemment sélectionnée
3. En-têtes du navigateur - en-tête Accept-Language
4. Locale par défaut - Langue de secours configurée

Le middleware gère automatiquement la détection de la langue du navigateur et la persistance du cookie sans configuration supplémentaire.

Chemins localisés

Personnalisez les chemins d’URL selon la langue :

export default createNextMiddleware({
  pathConfig: {
    // Anglais : /en/products, Chinois : /zh/产品
    "/products": {
      "zh": "/产品"
    },
    
    // Routes dynamiques : /en/product/123, /zh/产品/123
    "/product/[id]": {
      "zh": "/产品/[id]"
    }
  }
});

Structure des URL

Par défaut, votre locale par défaut ne sera pas préfixée par un code de locale :

/about     → /about        (locale par défaut : anglais)
/about     → /es/about     (espagnol)
/about     → /fr/about     (français)

Ajouter un préfixe à la locale par défaut

Pour appliquer un préfixe à toutes les locales, y compris la locale par défaut :

export default createNextMiddleware({
  prefixDefaultLocale: true
});

Résultat :

/about     → /en/about     (Anglais, avec préfixe)
/about     → /es/about     (Espagnol, avec préfixe)
/about     → /fr/about     (Français, avec préfixe)

Problèmes fréquents

Segment de route dynamique manquant

Toutes les pages doivent se trouver dans [locale]/ :

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

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

Configuration du matcher

Exclure les routes d’API et les fichiers statiques :

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

Prochaines étapes

• Guide SSG - Génération statique avec routage par locale
• Prise en charge RTL - Langues écrites de droite à gauche
• Référence de l’API :