# gt-next: General Translation Next.js SDK: Middleware
URL: https://generaltranslation.com/fr/docs/next/guides/middleware.mdx
---
title: Middleware
description: Détection automatique de la langue et routage des URL en fonction des préférences de l’utilisateur
---

Middleware détecte automatiquement les préférences linguistiques des utilisateurs et les 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 utilisateur pour proposer la langue appropriée avant le chargement du moindre contenu.

<Callout>
  **Emplacement du fichier :** Placez `proxy.ts` à la racine de votre projet, au même niveau que votre répertoire `app/` — et non à l’intérieur. `proxy.ts` (Next.js 16+) ou `middleware.ts` (Next.js 15 et versions antérieures)
</Callout>

## Configuration

### Étape 1 : Créez une route dynamique

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

<Files>
  <Folder name="my-app" defaultOpen={true}>
    <File name="proxy.ts" />

    <Folder name="app" defaultOpen={true}>
      <Folder name="[locale]" defaultOpen={true}>
        <File name="layout.tsx" />

        <File name="page.tsx" />

        <Folder name="about">
          <File name="page.tsx" />
        </Folder>
      </Folder>

      <Folder name="api">
        <File name="route.ts" />
      </Folder>
    </Folder>

    <File name="next.config.js" />
  </Folder>
</Files>

### Étape 2 : Ajouter le middleware

Créez `proxy.ts` à la racine du projet :

```ts
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 active la détection automatique de la langue et le routage des URL avec des préfixes de paramètre régional tels que `/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. **Paramètre régional dans l’URL** - `/es/about` → espagnol
2. **Cookie de l’utilisateur** - Sélection de langue précédente
3. **En-têtes du navigateur** - En-tête `Accept-Language`
4. **Paramètre régional 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 d’URL localisés

Personnalisez les chemins d’URL selon la langue :

```ts
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 paramètre régional par défaut **n’est pas** précédé d’un code de langue :

```
/about     → /about        (paramètre régional par défaut : anglais)
/about     → /es/about     (espagnol)
/about     → /fr/about     (français)
```


### Ajouter un préfixe au paramètre régional par défaut

Pour ajouter un préfixe à tous les paramètres régionaux, y compris celui par défaut :

```ts
export default createNextMiddleware({
  prefixDefaultLocale: true
});
```

Résultat :

```
/about     → /en/about     (English, with prefix)
/about     → /es/about     (Spanish, with prefix)
/about     → /fr/about     (French, with prefix)
```


## Problèmes courants

### Route dynamique manquante

Toutes les pages doivent se trouver sous `[locale]/` :

```
❌ Wrong:
app/
├── page.tsx
└── about/page.tsx

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


### Configuration du matcher

Excluez les routes d’API et les fichiers statiques :

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

<Callout>
  Testez soigneusement la configuration de votre middleware : des matchers incorrects peuvent provoquer des boucles de redirection infinies ou empêcher le chargement des ressources statiques.
</Callout>


## Étapes suivantes

<Callout>
  **Voyez-le en action :** L’[application d’exemple de génération de site statique](https://github.com/gt-examples/static-site-generation) inclut une configuration complète du middleware avec routage par paramètre régional — [aperçu en direct](https://static-site-generation.generaltranslation.dev).
</Callout>

* [Guide SSG](/docs/next/guides/ssg) - Génération statique avec routage par paramètre régional
* [Prise en charge RTL](/docs/next/guides/rtl) - Langues s’écrivant de droite à gauche
* Références d’API :