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 utilise les paramètres du navigateur, la géolocalisation et les préférences utilisateur pour servir la bonne langue avant que tout contenu ne se charge.

Configuration

Étape 1 : Créer une route dynamique

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

Étape 2 : Ajoutez le middleware

Créez le fichier proxy.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 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 comme /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 des cookies, 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 préfixer 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

Route dynamique manquante

Toutes les pages doivent être placées 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 files 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érences de l’API :