Die statische Seitengenerierung rendert Seiten zur Build‑Zeit vor und erstellt statische HTML‑Dateien für jede Locale. Das sorgt für hervorragende Performance und SEO‑Vorteile und stellt sicher, dass alle Übersetzungsinhalte sofort verfügbar sind, wenn Nutzer Ihre Website besuchen.

App Router

Voraussetzungen für das Setup

Um SSG mit GT zu aktivieren, benötigen Sie:

1. App Router mit Middleware-Routing – siehe Middleware-Leitfaden
2. Lokale Übersetzungen – siehe Leitfaden zu lokalen Übersetzungen
3. Client-seitige Importe – verwenden Sie gt-next/client statt gt-next

Schritt 1: GTProvider konfigurieren

Platziere GTProvider in deinem [locale]-Layout und übergib die Funktion 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>
  );
}

Schritt 2: Client-Imports verwenden

Importieren Sie alle GT-Komponenten und -Hooks aus gt-next/client:

// ✅ Client-Importe für SSG verwenden
import { useGT, T } from 'gt-next/client';

// ❌ Diese verhindern SSG
import { getGT } from 'gt-next/server';
import { T } from 'gt-next';

Schritt 3: generateStaticParams konfigurieren

Stellen Sie sicher, dass generateStaticParams für Ihre locales konfiguriert ist.

Benutzerdefiniertes getLocale

Für SSG erstellen Sie eine benutzerdefinierte Funktion getLocale, die mit der statischen Generierung zusammenarbeitet:

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;
}

Frühere Versionen

Leider gibt es in früheren Versionen keine Möglichkeit, mit SSG auf URL-Pfadparameter zuzugreifen. Sie müssen auf Next.js 15.1 oder höher aktualisieren.

Häufige Probleme

Seiten werden nicht statisch generiert

Wenn deine Seiten nicht statisch generiert werden, überprüfe, ob alle GT-Komponenten und -Hooks aus gt-next/client importiert werden:

// ❌ Diese verhindern SSG
import { getGT } from 'gt-next/server';
import { getLocale } from 'gt-next/server';
import { getTranslations } from 'gt-next/server';
import { T } from 'gt-next';

// ✅ Diese funktionieren mit SSG
import { useGT, T } from 'gt-next/client';

Alles, was Header oder Cookies ausliest, verhindert die statische Generierung.

Nächste Schritte

• Lokaler Übersetzungsspeicher – erforderlich für SSG-Setup
• Middleware-Leitfaden – erforderlich für Locale-Routing