Die Middleware erkennt automatisch die Sprachpräferenzen der Nutzer und leitet sie zur passenden lokalisierten Version Ihrer Website weiter. Sie nutzt Browsereinstellungen, Geolokalisierung und Nutzerpräferenzen, um die richtige Sprache bereitzustellen, noch bevor Inhalte geladen werden.

Setup

Schritt 1: Dynamische Route erstellen

Erstellen Sie ein [locale]-Verzeichnis in Ihrem app/-Ordner und verschieben Sie alle Seiten hinein:

Schritt 2: Middleware hinzufügen

Erstellen Sie middleware.ts im Projektstammverzeichnis:

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 bevorzugte Sprache der Nutzer in dieser Reihenfolge:

1. URL-Locale - /es/about → Spanisch
2. Benutzer-Cookie - Zuvor gewählte Sprache
3. Browser-Header - Accept-Language-Header
4. Standard-Locale - Konfigurierter Standardwert

Die Middleware übernimmt die Browser-Spracherkennung und Cookie-Speicherung automatisch, ohne zusätzliche Konfiguration.

Lokalisierte Pfade

Passe 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        (Standard-Locale: Englisch)
/about     → /es/about     (Spanisch)
/about     → /fr/about     (Französisch)

Präfix zur Standard-Locale hinzufügen

So fügen Sie 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

✅ Richtig:
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-Guide – Statische Generierung mit Locale-Routing
• RTL-Support – Rechts-nach-links-Sprachen
• API-Referenz: