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.

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:

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: