Das Wechseln der Sprache ermöglicht es Nutzerinnen und Nutzern, die bevorzugte Locale für die Inhalte Ihrer Anwendung zu ändern. GT Next bietet mehrere Ansätze – vom einfachen, programmatischen Wechsel bis hin zu vollständigem, URL‑basiertem Routing mit Middleware.

Verfügbare Methoden

• Programmgesteuert: useSetLocale-Hook für eigene Steuerelemente
• Vorgefertigte UI: <LocaleSelector>-Komponente mit Dropdown
• Eigene UI: useLocaleSelector-Hook zum Erstellen eigener Auswahlelemente
• URL-basiert: Middleware-Routing für locale in URL-Pfaden

Verwendung des useSetLocale-Hooks

Der useSetLocale-Hook ist ein clientseitiger Hook, mit dem Sie die Sprache Ihrer App ändern können:

import { useSetLocale } from 'gt-next/client';

export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>Sprache festlegen</button>;
}

Geben Sie einfach die gewünschte locale, zu der Sie wechseln möchten, als Argument an die vom Hook zurückgegebene Funktion.

Verwendung der <LocaleSelector>-Komponente

Die Komponente <LocaleSelector> bietet ein einsatzbereites Dropdown, das automatisch alle konfigurierten locales anzeigt:

import { LocaleSelector } from 'gt-next/client';

export default function MyComponent() {
  return <LocaleSelector />;
}

This component automatically:

• Zeigt alle für Ihr Projekt konfigurierten locales an
• Zeigt locales in ihren nativen Sprachbezeichnungen an
• Übernimmt die Umschaltlogik
• Behält die aktuelle Auswahl bei

Verwendung des Hooks useLocaleSelector

Wenn Sie eine eigene benutzerdefinierte Locale-Auswahlkomponente erstellen möchten, verwenden Sie useLocaleSelector:

import { useLocaleSelector } from 'gt-next/client';

function CustomLocaleSelector() {
  const { 
    locale,              // Aktuell aktive Locale (z. B. 'en', 'es')
    locales,             // Array der Locales, die Ihr Projekt unterstützt ['en', 'es', 'fr']
    setLocale,           // Funktion zum Ändern der Locale: setLocale('es')
    getLocaleProperties  // Funktion zum Abrufen von Anzeigeinformationen für eine Locale
  } = useLocaleSelector();
  
  if (!locales?.length) return null;
  
  return (
    <select 
      value={locale || ''} 
      onChange={(e) => setLocale(e.target.value)}
    >
      {locales.map((loc) => {
        const props = getLocaleProperties(loc);
        return (
          <option key={loc} value={loc}>
            {props.nativeNameWithRegionCode} {/* z. B. "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}

Sprachumschaltung über die URL

Für SEO und eine bessere UX kannst du die locale per Middleware-Routing in deine URLs integrieren. Weitere Informationen zu diesem Ansatz findest du im Middleware-Guide:

/en/products  → Englische Produktseite  
/es/products  → Spanische Produktseite
/fr/products  → Französische Produktseite

Dieser Ansatz bringt SEO-Vorteile, direkte Links zu Sprachversionen und teilbare, lokalisierte Links.

Wichtige Hinweise

Nur Client Components

Alle Hooks und Komponenten für den Sprachwechsel müssen in Client Components verwendet werden, die mit 'use client' gekennzeichnet sind:

'use client';
import { useSetLocale } from 'gt-next/client';

function LanguageSwitcher() {
  const setLocale = useSetLocale();
  // ... Komponenten-Logik
}

Voraussetzung: GTProvider

Komponenten für den Sprachwechsel müssen innerhalb eines <GTProvider> verwendet werden:

// ✅ Korrekt
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

// ❌ Falsch - außerhalb des Providers
<LanguageSwitcher />

Nächste Schritte

• Middleware Guide - URL-basiertes Sprachrouting
• Dynamic Content Guide - Übersetzung von Inhalten zur Laufzeit
• API Reference:
  • useSetLocale Hook
  • <LocaleSelector> Component