Cache-Komponenten
Einrichten von Cache-Komponenten in gt-next
Cache Components
In dieser Anleitung wird gezeigt, wie du gt-next zusammen mit Next.js Cache Components einsetzt, um internationalisierte Anwendungen zu optimieren.
Setup
Wenn Sie das noch nicht gemacht haben, folgen Sie der Next.js Cache Components-Anleitung, um Cache Components in Ihrem Projekt einzurichten.
Unterstützung für Cache Components in Ihrer gt-next-Konfiguration aktivieren:
const nextConfig = {
cacheComponents: true,
};
export default withGTConfig(nextConfig, {
experimentalLocaleResolution: true,
});Middleware aktivieren
Die vollständige Middleware-Anleitung finden Sie hier.
import { createNextMiddleware } from 'gt-next/middleware';
export default createNextMiddleware();
export const config = {
// Alle Pfade matchen, außer API-Routen, statischen Dateien und Next.js-Interna
matcher: ['/((?!api|static|.*\\..*|_next).*)']
};Fügen Sie den locale-Parameter zu gecachten Komponenten mit übersetzbarem Inhalt hinzu
Wenn Sie gecachte Komponenten mit übersetzbarem Inhalt verwenden, müssen Sie locale als Parameter übergeben. So wird sichergestellt, dass jedes Locale einen eigenen Cache-Eintrag erhält.
import { getLocale } from "gt-next/server"
async function CachedContent({locale}: {locale: string}) {
"use cache"
return <T>Hello World</T>
}
export default async function Page() {
const locale = await getLocale()
return <CachedContent locale={locale} />
}Konfigurationshinweise
- Benutzerdefinierte
getLocale-Funktionen werden überschrieben getRegion- undgetDomain-Funktionen sind deaktiviert- Sie können den für die Auflösung verwendeten Locale-Parameternamen mit
experimentalLocaleResolutionParamanpassen (Standard ist'locale')
export default withGTConfig(nextConfig, {
experimentalLocaleResolution: true,
experimentalLocaleResolutionParam: 'lang', // Optionale Anpassung
});Nächste Schritte
- Lesen Sie die Release Notes zu diesem Feature, gt-next@6.10.0, um weitere Informationen zu erhalten.