# General Translation React SDKs (gt-react, gt-next, gt-react-native): Middleware pour l’App Router
URL: https://generaltranslation.com/fr/docs/react/nextjs/app-router-middleware.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment configurer le routage par paramètre régional de General Translation pour l’App Router de Next.js.

Configurez le middleware, un segment racine `[locale]` et une fonction de paramètre régional de requête afin que les requêtes de l’App Router soient résolues vers la route localisée appropriée.

## Configurez le middleware [#middleware]

Créez `proxy.ts` à la racine du projet (`middleware.ts` avec Next.js 15 et versions antérieures) :

```ts title="proxy.ts"
import { createNextMiddleware } from 'gt-next/middleware';

export default createNextMiddleware();

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

Le middleware détecte le paramètre régional à partir de l’URL, du cookie, des en-têtes du navigateur ou du paramètre régional par défaut. Il redirige ensuite la requête ou la réécrit vers la route localisée correspondante.

## Ajoutez la route du paramètre régional [#locale-route]

Déplacez vos pages App Router dans `app/[locale]` :

<Files>
  <Folder name="app">
    <Folder name="[locale]">
      <File name="layout.tsx" />

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

  <File name="getLocale.ts" />

  <File name="proxy.ts" />
</Files>

Le segment de route reçoit le paramètre régional sélectionné par le middleware. Consultez [`createNextMiddleware`](/docs/react/nextjs/reference/functions/create-next-middleware) pour les options de routage, les [alias de chemins localisés](/docs/react/nextjs/reference/functions/create-next-middleware#path-config) et les [implémentations de pages spécifiques à un paramètre régional](/docs/react/nextjs/reference/functions/create-next-middleware#route-overrides).

<Callout type="info">
  **Rendu à la requête :** vous pouvez conserver le root layout dans `app/layout.tsx`
  et ne placer que les pages sous `app/[locale]`. Appelez
  [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) depuis le
  root layout ; le middleware fournit le paramètre régional de la requête, vous n&#39;avez donc pas besoin
  d&#39;un `getLocale.ts` personnalisé. Utilisez la fonction de requête ci-dessous lors du prerendering,
  car le middleware ne s&#39;exécute pas pendant la génération statique.
</Callout>

## Lire le paramètre régional depuis la racine [#root-locale]

Créez `getLocale.ts` à la racine de votre projet. `withGTConfig` détecte automatiquement ce fichier.

```ts title="./getLocale.ts"
import { locale } from 'next/root-params';

export default async function getLocale() {
  return await locale();
}
```

Le paramètre racine fournit le paramètre régional sans lire les en-têtes de la requête ni les cookies.

<Callout type="info">
  **Next.js 15.2–15.4 :** `next/root-params` est disponible dans Next.js 15.5 et
  les versions ultérieures. De la version 15.2 à la version 15.4, importez `unstable_rootParams` depuis `next/server`
  et renvoyez plutôt `(await unstable_rootParams())?.locale`. Les paramètres racine ne sont
  disponibles sous aucune forme avant la version 15.2 ; résolvez donc le paramètre régional à partir de la requête
  dans ce cas.
</Callout>

## Changer de paramètre régional [#locale-switching]

Lorsqu&#39;un visiteur change de paramètre régional, `gt-next` enregistre ce choix dans un cookie et actualise généralement les Server Components avec `router.refresh()`.

Si le visiteur bascule vers le paramètre régional par défaut alors que l&#39;URL actuelle correspond à un autre paramètre régional, le navigateur recharge la page afin que le middleware puisse réécrire le pathname. Par exemple, avec un paramètre régional par défaut sans préfixe, `/fr/about` devient `/about`.

## Rejeter les paramètres régionaux non pris en charge [#validate-locales]

Par défaut, un paramètre régional de requête non pris en charge génère un avertissement et se replie sur `defaultLocale`. Pour les routes strictement préfixées par un paramètre régional, validez le paramètre de route dans `app/[locale]/layout.tsx` et appelez `notFound()` :

```tsx title="app/[locale]/layout.tsx"
import { isLocaleSupported } from 'gt-next';
import { notFound } from 'next/navigation';

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;

  if (!isLocaleSupported(locale)) {
    notFound();
  }

  return (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}
```

[`isLocaleSupported`](/docs/react/nextjs/reference/functions/is-locale-supported) accepte les alias de paramètres régionaux configurés et réduit le type de la valeur à `string`. Le middleware ne convertit pas automatiquement un segment de route inconnu en erreur 404.

## Next steps

- /docs/react/nextjs/app-router-static-site-generation
- /docs/react/nextjs/registering-request-locales
- /docs/react/nextjs/cache-components
- /docs/react/nextjs/locale-alias-seo

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.