# General Translation React SDKs (gt-react, gt-next, gt-react-native): Génération de site statique avec le Pages Router
URL: https://generaltranslation.com/fr/docs/react/nextjs/pages-router-static-site-generation.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment pré-générer des pages localisées du Pages Router de Next.js avec General Translation.

Pré-générez des pages localisées du Pages Router avec `withGTStaticProps`. La configuration suit le même principe que `withGTServerSideProps`, mais Next.js génère les props au build.

## Configurez le routage selon les paramètres régionaux [#config]

Next.js doit connaître chaque paramètre régional lors du build afin de générer une version de chaque page pour chaque paramètre régional. Importez les valeurs depuis `gt.config.json` ; son tableau `locales` doit inclure `defaultLocale` :

```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);
```

Conservez les pages à leur emplacement habituel. Le routage internationalisé de Next.js génère des URL localisées sans segment `pages/[locale]`. Consultez [le routage par paramètre régional du Pages Router](/docs/react/nextjs/pages-router-middleware) pour connaître la procédure de configuration complète.

## Ajouter des props statiques [#static-props]

Enveloppez la fonction `getStaticProps` de chaque page avec `withGTStaticProps` :

```tsx title="pages/about.tsx"
import type { GetStaticProps } from 'next';
import { T, Var, withGTStaticProps } from 'gt-next';

type AboutPageProps = {
  generatedAt: string;
};

export const getStaticProps: GetStaticProps<AboutPageProps> =
  withGTStaticProps(async () => ({
    props: {
      generatedAt: new Date().toISOString(),
    },
  }));

export default function AboutPage({ generatedAt }: AboutPageProps) {
  return <T>Generated at: <Var>{generatedAt}</Var></T>;
}
```

`withGTStaticProps` ajoute le paramètre régional et l’instantané de traduction aux props de page retournées. Si la page n’a pas d’autres props, utilisez la forme sans argument :

```tsx title="pages/index.tsx"
import { withGTStaticProps } from 'gt-next';

export const getStaticProps = withGTStaticProps();
```

Next.js appelle `getStaticProps` une fois pour chaque paramètre régional configuré et fournit `context.locale`. Transmettez les valeurs générées à [`GTProvider`](/docs/react/reference/components/gt-provider) et [connectez la gestion des changements de paramètre régional](/docs/react/nextjs/pages-router-middleware#locale-changes) dans `_app.tsx`.

## Gérer les résultats dynamiques [#dynamic-results]

Le wrapper préserve les résultats `redirect` et `notFound` de votre fonction `getStaticProps`. Il ne charge les traductions que lorsque le résultat contient `props`.

```tsx title="pages/products/[id].tsx"
import { withGTStaticProps } from 'gt-next';

export const getStaticProps = withGTStaticProps(async ({ params }) => {
  const product = await loadProduct(params?.id);

  if (!product) {
    return { notFound: true };
  }

  return {
    props: { product },
    revalidate: 3600,
  };
});
```

Les routes dynamiques du Pages Router nécessitent toujours `getStaticPaths`. Renvoyez chaque chemin une fois pour chaque paramètre régional que vous souhaitez préafficher :

```tsx title="pages/products/[id].tsx"
import type { GetStaticPaths } from 'next';

export const getStaticPaths: GetStaticPaths = async ({ locales = [] }) => {
  const products = await loadProducts();

  return {
    paths: products.flatMap((product) =>
      locales.map((locale) => ({
        params: { id: product.id },
        locale,
      }))
    ),
    fallback: 'blocking',
  };
};
```

Si un chemin n’inclut pas `locale`, Next.js génère uniquement la version de ce chemin pour le paramètre régional par défaut.

## Résoudre les échecs de build [#build-failures]

### Impossible de déterminer le paramètre régional

`withGTStaticProps` lève une exception lorsque Next.js ne fournit ni `context.locale` ni `context.defaultLocale`. Ajoutez `i18n.locales` et `i18n.defaultLocale` à `next.config.ts` et assurez-vous qu&#39;ils correspondent à `gt.config.json`.

N’utilisez pas [`createNextMiddleware`](/docs/react/nextjs/reference/functions/create-next-middleware) pour remplacer la configuration `i18n` du Pages Router. Le middleware ne fournit pas le paramètre régional défini au moment du build et transmis à `getStaticProps`.

### Le paramètre régional par défaut affiche le contenu non traduit

Le paramètre régional par défaut reçoit volontairement un instantané de traduction vide, car le contenu source est déjà présent dans la page. Les autres paramètres régionaux chargent leur instantané de traduction généré.

Si un paramètre régional cible affiche également le contenu source, vérifiez que [`npx gt translate`](/docs/cli/reference/commands/translate) a été exécuté avant `next build` et que le paramètre régional est configuré à la fois dans Next.js et dans General Translation.

### L’utilitaire lève une exception dans un fichier App Router

`withGTStaticProps` est une API du Pages Router. Utilisez `generateStaticParams` et la [configuration de génération statique de l’App Router](/docs/react/nextjs/app-router-static-site-generation) sous `app/`.

### L’exportation statique ne prend pas en charge le routage par paramètre régional

La configuration `i18n` du Pages Router de Next.js ne prend pas en charge `output: 'export'`. Déployez les pages générées via un serveur Next.js ou un adaptateur de plateforme, ou utilisez des routes App Router qui génèrent un paramètre `[locale]` explicite.

## Next steps

- /docs/react/nextjs/pages-router-middleware
- /docs/react/guides/storing-translations
- /docs/react/guides/managing-locales
- /docs/react/guides/migrating-i18n-libraries

## Sitemap

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