# General Translation React SDKs (gt-react, gt-next, gt-react-native): Routage par paramètre régional du Pages Router
URL: https://generaltranslation.com/fr/docs/react/nextjs/pages-router-middleware.mdx
---

title: Routage par paramètre régional du Pages Router
description: Comment configurer le routage internationalisé de Next.js avec General Translation dans le Pages Router.
related:
  links:
    - /docs/react/nextjs-pages-router-quickstart
    - /docs/react/nextjs/pages-router-static-site-generation
    - /docs/react/nextjs/config

---

Le Pages Router utilise le routage internationalisé de Next.js pour résoudre les URL localisées et transmettre le paramètre régional actif à `gt-next`. Les routes restent à leur emplacement habituel sous `pages`.

## Configurer le routage par paramètre régional [#configure-routing]

Importez les paramètres régionaux de `gt.config.json` dans `next.config.ts`. Le tableau `locales` doit inclure `defaultLocale` :

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["en", "es", "fr"]
}
```

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

const nextConfig: NextConfig = {
  i18n: {
    locales: gtConfig.locales,
    defaultLocale: gtConfig.defaultLocale,
  },
};

export default withGTConfig(nextConfig);
```

Next.js sert le paramètre régional par défaut sans préfixe et préfixe les autres. Par exemple, l’anglais utilise `/about` et le français `/fr/about`.

Conservez chaque page à la racine de `pages` ; n’ajoutez pas de segment `[locale]` :

<Files>
  <Folder name="pages">
    <File name="_app.tsx" />

    <File name="index.tsx" />

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

  <File name="next.config.ts" />
</Files>

`withGTServerSideProps` et `withGTStaticProps` lisent le paramètre régional dans le contexte des fonctions de récupération de données de Next.js. Aucun middleware `gt-next`, `proxy.ts` ou `middleware.ts` n’est requis pour le routage par paramètre régional du Pages Router.

## Gérer les changements de paramètre régional [#locale-changes]

Transmettez un callback `_reload` adapté au paramètre régional à [`GTProvider`](/docs/react/reference/components/gt-provider) afin que les changements de paramètre régional utilisent la navigation de Pages Router et chargent les props de la page pour le paramètre régional sélectionné :

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

export default function App({
  Component,
  pageProps,
}: AppProps<WithGTStaticProps>) {
  const { locale, translations } = pageProps;

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

Pour les pages générées côté serveur, utilisez plutôt `WithGTServerSideProps`. Le callback remplace le rechargement complet de la page effectué par défaut par le provider par une navigation via le Pages Router.

## Fonctionnement de la détection du paramètre régional [#locale-detection]

Next.js détermine le paramètre régional de la requête avant l’exécution de `getServerSideProps` ou `getStaticProps` :

* Un préfixe de paramètre régional tel que `/fr/about` définit `context.locale` sur `fr`.
* Le cookie `NEXT_LOCALE` enregistre la préférence de l’utilisateur et peut rediriger une requête sans préfixe.
* Les préférences linguistiques du navigateur peuvent sélectionner un paramètre régional lorsqu’aucune préférence n’est enregistrée.
* `defaultLocale` est utilisé lorsqu’aucun autre paramètre régional configuré ne correspond.

Définissez `localeDetection: false` dans `nextConfig.i18n` pour désactiver les redirections automatiques basées sur le navigateur et les cookies. Les routes préfixées par un paramètre régional et la navigation du routeur adaptée au paramètre régional continuent de fonctionner.

<Callout type="info">
  **Modifié dans la version v11.1.3 :** La configuration du Pages Router utilise désormais le routage internationalisé de Next.js au lieu du middleware `gt-next` et d’un segment `pages/[locale]`. La détection existante des requêtes reste une solution de repli pour assurer la compatibilité lorsque Next.js ne fournit pas `context.locale`.
</Callout>
## Next steps

- /docs/react/nextjs-pages-router-quickstart
- /docs/react/nextjs/pages-router-static-site-generation
- /docs/react/nextjs/config