Statische Seitengenerierung
Wie Sie die statische Seitengenerierung für Ihre i18n-App unterstützen
Übersicht
Dieser Leitfaden zeigt dir, wie du deine i18n-App einrichtest, um die statische Seitengenerierung zu unterstützen.
Was ist statische Seitengenerierung?
Statische Seitengenerierung (SSG) ist eine Funktion von Next.js, mit der du statische Seiten zur Build-Zeit generieren kannst. Dies ist nützlich für die Performance und SEO.
SSG für den app Router
Anforderungen
Es gibt einige Anforderungen, um die statische Seitengenerierung für Ihre i18n-App zu aktivieren.
Je nachdem, ob Sie das app- oder pages-Verzeichnis verwenden, sind die Anforderungen etwas unterschiedlich.
- Ihre App muss den Next.js App Router verwenden.
- Ihre App muss i18n-Routing unterstützen (siehe i18n-Routing)
- Ihre App muss lokale Übersetzungen verwenden (siehe lokale Übersetzungen)
Schritte
Schritt 1:
Stellen Sie zunächst sicher, dass Ihre App eine <GTProvider>-Komponente im Root-Layout hat.
import { GTProvider } from 'gt-next';Da die App i18n-Routing verwendet, sollte der Provider in der [locale]/layout.tsx-Datei platziert werden.
Schritt 2:
Stellen Sie als Nächstes sicher, dass Ihre App die loadTranslations-Funktion zum Laden von Übersetzungen verwendet.
Übergeben Sie zusätzlich die Locale als Parameter an den <GTProvider>. Sie können die Locale aus dem params-Objekt erhalten.
import { loadTranslations } from '@/i18n/loadTranslations';
import { GTProvider } from 'gt-next';
export default async function RootLayout({
children,
params,
}: {
children: React.ReactNode;
params: Promise<{ locale: string }>;
}) {
const { locale } = await params;
return (
<GTProvider loadTranslations={loadTranslations} locale={locale}>
{children}
</GTProvider>
)
}Schritt 3:
Stellen Sie dann sicher, dass alle Ihre Hooks und Komponenten aus gt-next/client importiert werden.
import { useGT } from 'gt-next/client';
import { T } from 'gt-next/client';Dies ist wichtig, da Hooks und Komponenten, die aus gt-next/client importiert werden, niemals Header lesen, die zur Build-Zeit für statisch generierte Seiten nicht existieren.
Stellen Sie sicher, dass Sie Ihre Next.js-App korrekt für die Verwendung der getStaticParams-Funktion konfiguriert haben!
Das war's! Ihre App sollte jetzt die statische Seitengenerierung für mehrere Sprachen unterstützen!
SSG für den pages-Router
🚧 Dieser Abschnitt befindet sich derzeit im Aufbau. 🚧
Wie ist dieser Leitfaden?