Überblick

Statisches Rendering ist eine Kernfunktion des Next.js-Frameworks und liefert bereits zur Build-Zeit vorgerenderte Seiten für optimale Performance und SEO. Daher sollte jede native Next.js-Bibliothek nahtlos in diesem Rendering-Modell funktionieren. gt-next 6.9.0 führt Unterstützung für statisches Rendering ein und ermöglicht es internationalisierten Anwendungen, die vollständigen Möglichkeiten der statischen Generierung von Next.js zu nutzen, ohne Kompromisse bei der Locale-Erkennung oder der Übersetzungsfunktionalität einzugehen.

Was ist Static Rendering?

Static Rendering generiert HTML zur Build‑Zeit statt bei jeder einzelnen Anfrage. Dieser Ansatz liefert zwar eine hervorragende Performance, stellt jedoch i18n‑Bibliotheken vor Herausforderungen, da sie typischerweise auf Request‑Header, Cookies oder Middleware angewiesen sind, um die Benutzer-Lokale zu bestimmen. Während des Static Renderings stehen diese Abhängigkeiten zur Request‑Zeit nicht zur Verfügung, sodass alternative Ansätze für die Locale-Erkennung erforderlich sind.

Setup für statisches Rendering

Bevor du gt-next konfigurierst, stelle sicher, dass deine Next.js-Anwendung für die statische Generierung eingerichtet ist, indem du der Dokumentation zu generateStaticParams folgst.

Das Setup umfasst drei zentrale Komponenten:

1. Statisches Rendering in der Konfiguration aktivieren

export default withGTConfig(nextConfig, {
  experimentalEnableSSG: true,
})

2. Middleware konfigurieren

Richte Middleware für dynamische Requests ein:

// proxy.ts (Next.js 16+) oder middleware.ts (Next.js 15 und darunter)
import { createNextMiddleware } from 'gt-next/middleware'

export default createNextMiddleware();

export const config = {
  matcher: [
    "/((?!api|static|.*\\..*|_next).*)",
  ],
}

3. Statische Locale-Erkennung definieren

Erstelle eine Funktion getStaticLocale, die die Locale während des statischen Renderings bestimmt. Diese Funktion wird nur während der statischen Generierung ausgeführt – bei SSR wird das Standardverhalten (Lesen von Headern, Cookies usw.) verwendet.

Next.js 15.5+

// getStaticLocale.ts
import { locale } from "next/root-params";

export default async function getStaticLocale() {
  return await locale();
}

Next.js 15.1–15.4

// getStaticLocale.ts  
import { unstable_rootParams } from "next/server";

export default async function getStaticLocale() {
  return (await unstable_rootParams())?.locale;
}

getStaticRegion kann aufgerufen werden, um die Regionserkennung beim statischen Rendering zu konfigurieren.

Vorteile

Next.js-nativ: Nutzt das in Next.js integrierte Root-Params-System für die Kompatibilität mit statischem Rendering.

Zusätzliche Funktionen

Neben der statischen Generierung führt diese Version auch Unterstützung für benutzerdefinierte getLocale()- und getRegion()-Funktionen ein, die sowohl für SSR- als auch für statische Rendering-Umgebungen konfiguriert werden können.