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

title: Génération de site statique avec le Pages Router
description: Comment pré-générer des pages localisées du Pages Router de Next.js avec General Translation.
related:
  links:
    - /docs/react/nextjs-pages-router-quickstart
    - /docs/react/nextjs/pages-router-middleware
    - /docs/react/guides/storing-translations

---

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`.
## Next steps

- /docs/react/nextjs-pages-router-quickstart
- /docs/react/nextjs/pages-router-middleware
- /docs/react/guides/storing-translations