Middleware
Automatische Spracherkennung und URL-Routing basierend auf Benutzerpräferenzen
Middleware erkennt automatisch die Sprachpräferenzen der Benutzer und leitet sie zur passenden lokalisierten Version deiner Website weiter. Sie verwendet Browsereinstellungen, Geolokalisierung und Benutzerpräferenzen, um die richtige Sprache bereitzustellen, bevor Inhalte geladen werden.
Dateispeicherort: Platziere proxy.ts im Projekt-Root, auf derselben Ebene wie dein app/-Verzeichnis – nicht darin. proxy.ts (Next.js 16+) oder middleware.ts (Next.js 15 und älter)
Setup
Schritt 1: Dynamische Route erstellen
Erstelle ein [locale]-Verzeichnis in deinem app/-Ordner und verschiebe alle Seiten in dieses Verzeichnis:
Schritt 2: Middleware hinzufügen
Lege proxy.ts im Projektstammverzeichnis an:
import { createNextMiddleware } from 'gt-next/middleware';
export default createNextMiddleware();
export const config = {
// Alle Pfade außer API-Routen, statischen Dateien und Next.js-Interna abgleichen
matcher: ['/((?!api|static|.*\\..*|_next).*)']
};Dies ermöglicht die automatische Spracherkennung und das URL-Routing mit Locale-Präfixen wie /en/about, /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?