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.

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:

1. URL‑Locale – /es/about → Spanisch
2. Benutzer‑Cookie – vorherige Sprachauswahl
3. Browser‑Header – Accept-Language‑Header
4. 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.tsx

Matcher-Konfiguration

API-Routen und statische Dateien ausschließen:

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

Nächste Schritte

• SSG-Leitfaden - Statische Generierung mit locale-Routing
• RTL-Unterstützung - Sprachen mit Schreibrichtung von rechts nach links
• API Reference: