# 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.

L’App Router utilise `createNextMiddleware` pour le routage par paramètre régional. Le Pages Router utilise quant à lui le routage `i18n` intégré de Next.js et un callback de navigation du Pages Router.

## Routage par paramètre régional avec Pages Router [#pages-router-locale-routing]

N’ajoutez pas `createNextMiddleware` à une application Pages Router. Configurez le routage intégré de Next.js par paramètre régional afin que les pages rendues côté serveur et générées statiquement utilisent le paramètre régional actif.

### Étape 1 : Configurer les locales

Ajoutez chaque locale prise en charge, y compris le paramètre régional par défaut, à votre configuration Next.js :

```ts title="next.config.ts"
import type { NextConfig } from 'next';
import { withGTConfig } from 'gt-next/config';

const nextConfig: NextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr', 'ja'],
    defaultLocale: 'en',
  },
};

export default withGTConfig(nextConfig);
```

Next.js utilise le paramètre régional par défaut sans préfixe d’URL et préfixe les autres paramètres régionaux, comme `/es/about` et `/fr/about`.

### Étape 2 : Naviguer quand le paramètre régional change

Passez un callback de navigation à `GTProvider` dans `_app.tsx`. Cela permet à `LocaleSelector` de naviguer vers le paramètre régional Next.js sélectionné et de charger les props de page correspondantes :

```tsx title="pages/_app.tsx"
import type { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import {
  GTProvider,
  type WithGTServerSideProps,
  type WithGTStaticProps,
} from 'gt-next';

type GTPageProps = WithGTServerSideProps | WithGTStaticProps;

export default function App({
  Component,
  pageProps,
}: AppProps<GTPageProps>) {
  const router = useRouter();
  const { locale, translations, ...restPageProps } = pageProps;

  return (
    <GTProvider
      locale={locale}
      translations={translations}
      _reload={({ locale: nextLocale }) => {
        void router.push(
          { pathname: router.pathname, query: router.query },
          router.asPath,
          { locale: nextLocale }
        );
      }}
    >
      <Component {...restPageProps} />
    </GTProvider>
  );
}
```

Le rappel utilise `useRouter` de `next/router`, qui correspond à l’API du Pages Router. Les applications App Router utilisent l’API distincte de `next/navigation`.

Pour les pages générées statiquement, suivez les [instructions SSG du Pages Router](/docs/next/guides/ssg#pages-router-setup).

## Configuration du middleware App Router

<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>

### É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|trpc|_next|_vercel|.*\\..*).*)']
};
```

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`.

Pour limiter le middleware i18n à certains chemins, configurez [`pathRegex`](/docs/next/api/config/with-gt-config#filter-middleware-paths) dans `withGTConfig`.

## 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 :

```text
/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 :

```text
/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]/` :

```text
❌ 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|trpc|_next|_vercel|.*\\..*).*)']
};
```

<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 : [`createNextMiddleware()`](/docs/next/api/middleware/create-next-middleware)