Middleware zur Spracherkennung
Automatische Spracherkennung und URL‑Routing basierend auf Benutzerpräferenzen
Die Middleware erkennt automatisch die Sprachpräferenzen der Benutzer und leitet sie zur passenden lokalisierten Version Ihrer Website weiter. Sie verwendet Browsereinstellungen, Geolokalisierung und Benutzerpräferenzen, um die richtige Sprache bereitzustellen, noch bevor Inhalte geladen werden.
Dateipfad: Platzieren Sie middleware.ts im Projektstammverzeichnis, auf derselben Ebene wie Ihr app/-Verzeichnis – nicht darin.
Setup
Schritt 1: Dynamische Route erstellen
Lege ein [locale]-Verzeichnis im Ordner app/ an und verschiebe alle Seiten dort hinein:
Schritt 2: Middleware hinzufügen
Erstelle im Projektstammverzeichnis die Datei middleware.ts:
import { createNextMiddleware } from 'gt-next/middleware';
export default createNextMiddleware();
export const config = {
// Alle Pfade abgleichen, außer API‑Routen, statischen Dateien und internen Next.js‑Bereichen
matcher: ['/((?!api|static|.*\\..*|_next).*)']
};Dies ermöglicht die automatische Spracherkennung und das URL‑Routing mit Locale‑Präfixen wie /en/about und /es/about.
Spracherkennung
Die Middleware ermittelt die Sprachpräferenzen der Nutzer in folgender Reihenfolge:
- URL‑Locale –
/es/about→ Spanisch - Benutzer‑Cookie – vorherige Sprachauswahl
- Browser‑Header –
Accept-Language‑Header - Standard‑Locale – konfigurierte Standardsprache
Die Middleware übernimmt die Browser‑Spracherkennung und die Speicherung des Cookies automatisch, ohne zusätzliche Konfiguration.
Lokalisierte Pfade
Passen Sie URL-Pfade für verschiedene Sprachen an:
export default createNextMiddleware({
pathConfig: {
// Englisch: /en/products, Chinesisch: /zh/产品
"/products": {
"zh": "/产品"
},
// Dynamische Routen: /en/product/123, /zh/产品/123
"/product/[id]": {
"zh": "/产品/[id]"
}
}
});URL-Struktur
Standardmäßig wird Ihre Standard-Locale nicht mit einem Locale-Code vorangestellt:
/about → /about (Standardsprache: Englisch)
/about → /es/about (Spanisch)
/about → /fr/about (Französisch)Präfix zur Standard-Locale hinzufügen
So fügst du allen Locales, einschließlich der Standard-Locale, ein Präfix hinzu:
export default createNextMiddleware({
prefixDefaultLocale: true
});Ergebnis:
/about → /en/about (Englisch, mit Präfix)
/about → /es/about (Spanisch, mit Präfix)
/about → /fr/about (Französisch, mit Präfix)Häufige Probleme
Fehlende dynamische Route
Alle Seiten müssen sich innerhalb von [locale]/ befinden:
❌ Falsch:
app/
├── page.tsx
└── about/page.tsx
✅ Korrekt:
app/
└── [locale]/
├── page.tsx
└── about/page.tsxMatcher-Konfiguration
API-Routen und statische Dateien ausschließen:
export const config = {
matcher: ['/((?!api|static|.*\\..*|_next).*)']
};Testen Sie Ihre Middleware-Konfiguration gründlich – falsche Matcher können zu endlosen Weiterleitungen führen oder statische Assets beeinträchtigen.
Nächste Schritte
- SSG-Leitfaden - Statische Generierung mit locale-Routing
- RTL-Unterstützung - Sprachen mit Schreibrichtung von rechts nach links
- API Reference:
Wie ist diese Anleitung?