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

Pré-générez une route App Router par paramètre régional avec `generateStaticParams`. Le routage par paramètre régional et la résolution du paramètre régional de la requête utilisent la même configuration que pour les routes dynamiques.

## Conservez votre configuration Next.js [#config]

La génération statique ne modifie pas votre configuration `withGTConfig` :

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

const nextConfig: NextConfig = {};

export default withGTConfig(nextConfig);
```

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

Suivez le [guide du middleware pour l’App Router](/docs/react/nextjs/app-router-middleware) pour créer `proxy.ts`, déplacer vos routes dans `app/[locale]` et définir la fonction [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) personnalisée.

## Désactiver la détection de région [#region]

Le résolveur de région par défaut lit un cookie, ce qui rend la route dynamique. Ajoutez `getRegion.ts` à la racine de votre projet pour désactiver la détection de région lors du prérendu :

```ts title="./getRegion.ts"
export default async function getRegion() {
  return undefined;
}
```

`withGTConfig` détecte automatiquement ce fichier.

## Générer les routes de paramètre régional [#generate-routes]

Renvoie un paramètre de route pour chaque paramètre régional configuré :

```tsx title="app/[locale]/page.tsx"
import { getLocales, T } from 'gt-next';

export function generateStaticParams() {
  return getLocales().map((locale) => ({ locale }));
}

export default function HomePage() {
  return <T>Welcome to our site</T>;
}
```

Next.js pré-génère désormais `app/[locale]/page.tsx` pour chaque paramètre régional.

<Callout type="warn">
  Cette configuration permet de pré-générer des pages tout en déployant un serveur Next.js. Un projet avec `output: 'export'` ne peut pas être buildé tant que `proxy.ts` ou `middleware.ts` est présent. Supprimez le middleware, exportez `dynamicParams = false`, générez un chemin pour chaque paramètre régional et créez des liens directs vers ces chemins pour une exportation entièrement statique ; la détection du paramètre régional et les redirections ne seront pas disponibles.
</Callout>

## Vérifier la compatibilité avec Next.js [#compatibility]

Le fichier personnalisé `getLocale.ts` doit accéder au paramètre régional racine `[locale]` lors du prérendu. Utilisez l’API disponible dans votre version de Next.js :

| Version de Next.js           | API du paramètre régional racine                                                     |
| ---------------------------- | ------------------------------------------------------------------------------------ |
| 15.5 et versions ultérieures | `locale()` de `next/root-params`                                                     |
| 15.2.0 et 15.2.3–15.4        | `unstable_rootParams()` de `next/server`                                             |
| Antérieure à 15.2            | Effectuez une mise à niveau avant d’utiliser cette configuration SSG avec App Router |

`gt-next` exclut Next.js 15.2.1 et 15.2.2 de sa plage de versions de pairs prises en charge. Mettez à niveau ces versions vers la 15.2.3 ou une version ultérieure.

Pour Next.js 15.2.0 ou 15.2.3–15.4, utilisez :

```ts title="./getLocale.ts"
import { unstable_rootParams } from 'next/server';

export default async function getLocale() {
  const params = await unstable_rootParams();
  return params?.locale;
}
```

Conservez, pour les projets actuels, l’exemple `next/root-params` pour Next.js 15.5 et versions ultérieures du [guide sur le middleware](/docs/react/nextjs/app-router-middleware#root-locale).

## Se remettre des échecs de build [#build-failures]

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

Le middleware ne s’exécute pas lorsque Next.js prérend une page. Vérifiez que `getLocale.ts` existe à la racine du projet ou que [`getLocalePath`](/docs/react/nextjs/config#request-function-paths) y pointe.

Si une valeur de route arbitraire doit renvoyer une erreur 404 au lieu du contenu de secours du paramètre régional par défaut, validez le paramètre `[locale]` avec [`isLocaleSupported`](/docs/react/nextjs/reference/functions/is-locale-supported).

### `DYNAMIC_SERVER_USAGE`

Cette erreur indique que le rendu statique a tenté d’accéder à une API de requête dynamique. Vérifiez que :

* `getLocale.ts` lit uniquement le paramètre de la route racine.
* `getRegion.ts` renvoie une valeur fixe ou `undefined`.
* Aucune des deux fonctions n’appelle `headers()` ni `cookies()`.

Si les Cache Components sont activés, suivez également les exigences plus strictes de [configuration des Cache Components](/docs/react/nextjs/cache-components).

### Erreurs d’exportation du paramètre racine

Une erreur indiquant que l’exportation `locale` n’existe pas signifie généralement que le projet utilise une API incompatible avec sa version de Next.js. Consultez le [tableau de compatibilité](#compatibility).

Le segment `[locale]` doit également être le premier segment dynamique dans l’arborescence de l’App Router. Placez le root layout dans `app/[locale]/layout.tsx` ; un layout situé au-dessus de ce segment ne peut pas lire le paramètre régional racine lors du prérendu.

### Routes d’images de métadonnées

Les fichiers Open Graph, Twitter, d’icône et d’icône Apple sont des gestionnaires de route internes et ne peuvent pas lire `next/root-params`. Lisez `params.locale` et appelez [`registerLocale`](/docs/react/nextjs/reference/functions/register-locale) avant tout autre utilitaire côté serveur. Consultez [Enregistrement des paramètres régionaux de la requête](/docs/react/nextjs/registering-request-locales#metadata-images).

## Next steps

- /docs/react/nextjs/app-router-middleware
- /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.