Génération de site statique

Pré‑rendre des pages internationalisées à la compilation pour des performances optimales

La génération de site statique pré‑rend les pages à la compilation, en créant des fichiers HTML statiques pour chaque locale. Cela offre d’excellentes performances et des avantages en matière de SEO, tout en garantissant que l’ensemble du contenu traduit est disponible immédiatement lorsque les utilisateurs visitent votre site.

Prérequis : la SSG nécessite le routage via middleware et des traductions locales pour fonctionner correctement avec l’internationalisation.

Routeur d’app

Prérequis

Pour activer le SSG avec GT, vous aurez besoin de :

  1. App Router avec routage par middleware - voir le guide du middleware
  2. Traductions locales - voir le guide des traductions locales
  3. Imports côté client - utilisez gt-next/client plutôt que gt-next

Étape 1 : Configuration de GTProvider

Placez GTProvider dans votre layout [locale] avec la fonction loadTranslations :

// app/[locale]/layout.tsx
import { GTProvider } from 'gt-next/client';
import { loadTranslations } from '@/loadTranslations';

export default async function RootLayout({ children, params }) {
  const { locale } = await params;
  
  return (
    <GTProvider loadTranslations={loadTranslations} locale={locale}>
      {children}
    </GTProvider>
  );
}

Étape 2 : utiliser les imports client

Importez tous les composants et hooks GT depuis gt-next/client :

// ✅ Utilisez les imports client pour SSG
import { useGT, T } from 'gt-next/client';

// ❌ Ceux-ci empêchent SSG
import { getGT } from 'gt-next/server';
import { T } from 'gt-next';

Étape 3 : Configurer generateStaticParams

Assurez-vous que generateStaticParams est configuré pour vos locales.

getLocale personnalisé

Pour le SSG, créez une fonction getLocale personnalisée compatible avec la génération statique :

Next.js 15.5+

// getLocale.ts
import { locale } from "next/root-params";
export default async function getLocale() {
  return await locale();
}

Next.js 15.1–15.4

// getLocale.ts  
import { unstable_rootParams } from "next/server";
export default async function getLocale() {
  return (await unstable_rootParams())?.locale;
}

Versions antérieures

Malheureusement, dans les versions antérieures, il n’existe aucun moyen d’accéder aux paramètres de chemin d’URL avec SSG. Vous devrez mettre à niveau vers Next.js 15.1 ou une version ultérieure.

Problèmes fréquents

Pages non générées statiquement

Si vos pages ne sont pas générées statiquement, assurez-vous que tous les composants et hooks GT sont importés depuis gt-next/client :

// ❌ Ces imports empêchent la SSG
import { getGT } from 'gt-next/server';
import { getLocale } from 'gt-next/server';
import { getTranslations } from 'gt-next/server';
import { T } from 'gt-next';

// ✅ Ces imports fonctionnent avec la SSG
import { useGT, T } from 'gt-next/client';

Tout accès aux en-têtes ou aux cookies empêchera la génération statique.

Prochaines étapes

Que pensez-vous de ce guide ?

Génération de site statique