# General Translation React SDKs (gt-react, gt-next, gt-react-native): createNextMiddleware
URL: https://generaltranslation.com/fr/docs/react/nextjs/reference/functions/create-next-middleware.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Ajoutez le routage et la détection par paramètre régional à une application Next.js avec General Translation. Référence API pour createNextMiddleware.
La fonction `createNextMiddleware` de `gt-next/middleware` détecte le paramètre régional de chaque visiteur, l'enregistre dans un cookie et le redirige vers la version localisée d'une page.
Utilisez le [guide du middleware App Router](/docs/react/nextjs/app-router-middleware) pour la configuration actuelle. Les applications Pages Router utilisent plutôt le [routage internationalisé de Next.js](/docs/react/nextjs/pages-router-middleware).
*Le middleware est facultatif si vous n'avez pas besoin de détecter le paramètre régional au moment de la requête ni d'URL préfixées par le paramètre régional. Sans lui, les sélecteurs de paramètre régional laissent les URL sans préfixe, enregistrent le paramètre régional sélectionné dans un cookie et actualisent le contenu de l'App Router.*
## Vue d’ensemble [#overview]
Créez le middleware et exportez-le, ainsi qu’un path matcher, dans votre fichier middleware. Placez-le à la racine de votre projet — `proxy.ts` sur Next.js 16+, ou `middleware.ts` sur Next.js 15 et versions antérieures — et non dans `app/` ou `pages/`.
```ts title="proxy.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).*)'],
};
```
## Fonctionnement [#how-it-works]
Le middleware détermine le paramètre régional de chaque requête à partir des sources suivantes, dans cet ordre :
1. **Cookie de réinitialisation du paramètre régional** — le paramètre régional qui vient d'être sélectionné dans le navigateur, lorsqu'une réinitialisation du routage des paramètres régionaux est en attente.
2. **Paramètre régional de l'URL** — un préfixe de paramètre régional pris en charge, tel que `/es/about`, ou un chemin non préfixé configuré pour le paramètre régional par défaut.
3. **Cookie de paramètre régional** — le paramètre régional précédemment choisi par le visiteur lorsqu'aucune réinitialisation n'est en attente.
4. **Cookie de paramètre régional du référent** — le paramètre régional de la route cliente précédente lorsqu'aucune réinitialisation n'est en attente.
5. **En-têtes du navigateur** — l'en-tête `Accept-Language`, sauf si [`ignoreBrowserLocales`](/docs/react/nextjs/config#ignore-browser-locales) est activé.
6. **Paramètre régional par défaut** — votre `defaultLocale` configuré comme contenu de secours.
Il définit ensuite un cookie de paramètre régional et, lorsque `localeRouting` est activé, redirige ou réécrit vers le chemin localisé approprié. Par défaut, `defaultLocale` n'est pas préfixé (`/about` reste `/about`), contrairement aux autres paramètres régionaux (`/es/about`). Les codes de langue sont normalisés dans leur forme canonique lorsque les services General Translation sont activés, et les paramètres régionaux configurés non pris en charge génèrent un avertissement à la compilation.
## Options [#options]
`createNextMiddleware` prend un seul objet d’options. Tous les champs sont facultatifs.
| Option | Description | Type | Facultatif | Par défaut |
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------- | ---------- | ---------- |
| [`localeRouting`](#locale-routing) | Active le routage basé sur les paramètres régionaux. | `boolean` | Oui | `true` |
| [`prefixDefaultLocale`](#prefix-default-locale) | Ajoute également le paramètre régional par défaut comme préfixe dans l’URL. | `boolean` | Oui | `false` |
| [`ignoreSourceMaps`](#ignore-source-maps) | Ignore les requêtes de source maps de Next.js. | `boolean` | Oui | `true` |
| [`pathConfig`](#path-config) | Alias de chemins localisés. | `object` | Oui | `{}` |
| [`routeOverrides`](#route-overrides) | Utilise une implémentation de page propre à un paramètre régional sans modifier son URL publique. | `RouteOverrides` | Oui | `{}` |
*Remarque : pour restreindre les chemins d’URL auxquels le middleware s’applique, définissez [`pathRegex`](/docs/react/nextjs/config#path-regex) dans `withGTConfig` — ce n’est pas une option du middleware. Le `matcher` de votre `config` exportée est ce que Next.js utilise pour déterminer si le middleware s’exécute.*
### `localeRouting` [#locale-routing]
**Type** `boolean` · **Facultatif** · **Par défaut** `true`
Active le routage basé sur le paramètre régional et les redirections en fonction du paramètre régional. Lorsque la valeur est `false`, le middleware détecte et enregistre toujours le paramètre régional, mais n’ajoute pas de préfixe du paramètre régional et ne réécrit pas les chemins.
### `prefixDefaultLocale` [#prefix-default-locale]
**Type** `boolean` · **Facultatif** · **Par défaut** `false`
Lorsque la valeur est `false` (par défaut), le paramètre régional par défaut est accessible sans préfixe (`/about`), tandis que les autres paramètres régionaux utilisent un préfixe (`/es/about`). Lorsque la valeur est `true`, chaque paramètre régional utilise un préfixe, y compris celui par défaut (`/en/about`).
### `ignoreSourceMaps` [#ignore-source-maps]
**Type** `boolean` · **Facultatif** · **Par défaut** `true`
Lorsque la valeur est `true`, les requêtes de source maps Next.js sont relayées sans modification.
### `pathConfig` [#path-config]
**Type** `object` · **Facultatif** · **Par défaut** `{}`
Associe des chemins partagés à des chemins localisés, afin qu’une route puisse avoir une URL différente selon le paramètre régional. Chaque clé correspond au chemin partagé ; chaque valeur est soit un seul chemin localisé, soit une table de correspondance par paramètre régional.
```ts title="proxy.ts"
export default createNextMiddleware({
pathConfig: {
// Anglais : /products, Français : /fr/produits
'/products': {
fr: '/produits',
},
// Dynamique : /product/123, /fr/produit/123
'/product/[id]': {
fr: '/produit/[id]',
},
// Catch-all obligatoire : /blog/2026/launch, /fr/articles/2026/launch
'/blog/[...slug]': {
fr: '/articles/[...slug]',
},
// Catch-all facultatif : /news ou /news/latest, /fr/actualites ou /fr/actualites/latest
'/news/[[...slug]]': {
fr: '/actualites/[[...slug]]',
},
},
});
```
### `routeOverrides` [#route-overrides]
**Type** `RouteOverrides` · **Facultatif** · **par défaut** `{}`
Associe un paramètre régional à des patterns de route partagés qui disposent d'une implémentation de page propre à ce paramètre régional. L'URL publique continue d'utiliser la route partagée ou son alias [`pathConfig`](#path-config), tandis que le middleware réécrit la requête vers une route comportant un second segment de paramètre régional, statique.
Par exemple, cette structure de fichiers fournit aux visiteurs francophones des implémentations personnalisées d'une page statique, d'une page produit dynamique et d'un ensemble de pages de blog :
Configurez chaque override avec son pattern de route partagé :
```ts title="proxy.ts"
export default createNextMiddleware({
routeOverrides: {
fr: [
'/home', // Route statique
'/product/[id]', // Paramètre dynamique
'/blog/[[...slug]]', // Route et tous ses chemins enfants
],
},
});
```
* `/home` utilise `app/[locale]/fr/home/page.tsx` pour le français et le fichier partagé `app/[locale]/home/page.tsx` pour les autres locales.
* `/product/[id]` ajoute une page produit uniquement pour le français, tout en conservant l'`id` dynamique.
* `/blog/[[...slug]]` ajoute une famille de pages de blog uniquement pour le français, à savoir `/blog`, `/blog/authors`, `/blog/posts` et `/blog/posts/[...slug]`.
Les overrides sont ignorés lorsque `localeRouting` vaut `false`. Les clés de paramètre régional sont standardisées lorsque les services General Translation sont activés.
Les API de cache et de layout voient la route interne. Passez la destination du rewrite, par exemple `/fr/fr/home`, à `revalidatePath` de Next.js. Depuis le layout `[locale]`, `useSelectedLayoutSegments` inclut également le segment de paramètre régional static de l'override.
Utilisez [``](/docs/react/nextjs/link) depuis `gt-next/link` pour la navigation interne : les routes préfixées par le paramètre régional sont ainsi générées avant la navigation, sans redirection supplémentaire du middleware.
## Exemple [#example]
```ts title="proxy.ts"
import { createNextMiddleware } from 'gt-next/middleware';
export default createNextMiddleware({
prefixDefaultLocale: true,
pathConfig: {
'/about': {
fr: '/a-propos',
},
},
});
export const config = {
matcher: ['/((?!api|static|.*\\..*|_next).*)'],
};
```
*Avertissement : testez soigneusement votre matcher. Un matcher trop large peut entraîner des boucles de redirection ou perturber les ressources statiques.*
## Sitemap
See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.