Sprache ändern

Überblick

In diesem Leitfaden zeigen wir Ihnen, wie Sie die Sprache Ihrer Next.js-App ändern können.

Falls Sie Ihre App noch nicht mit gt-next eingerichtet haben, lesen Sie bitte den Schnellstart-Leitfaden, bevor Sie fortfahren.

Es gibt drei Möglichkeiten, die Sprache Ihrer App mit gt-next zu ändern.

1. Verwendung des useSetLocale() Hooks
2. Verwendung der <LocaleSelector> Komponente
3. Verwendung des useLocaleSelector() Hooks
4. Verwendung von Middleware i18n Routing

Wir werden die ersten drei Methoden in diesem Leitfaden behandeln. Siehe den Middleware Routing Leitfaden für weitere Informationen darüber, wie Sie die Sprache Ihrer App mit Middleware ändern können.

Verwendung des useSetLocale Hooks

Der useSetLocale Hook ist ein clientseitiger Hook, der es Ihnen ermöglicht, die Sprache Ihrer App zu ändern. Er muss innerhalb einer GTProvider Komponente verwendet werden.

 } from 'gt-next/client';
export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}

Geben Sie einfach die Locale, zu der Sie wechseln möchten, als Argument an die Callback-Funktion weiter, die vom useSetLocale Hook zurückgegeben wird.

Verwendung der <LocaleSelector> Komponente

Die <LocaleSelector> Komponente ist eine clientseitige Komponente, mit der du die Sprache deiner App ändern kannst. Sie muss innerhalb einer GTProvider Komponente verwendet werden.

Dies ist ein minimalistisches UI-Dropdown, das alle in deinem Projekt aktivierten Sprachen anzeigt und es den Nutzern ermöglicht, eine andere Sprache auszuwählen.

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

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

Verwendung des useLocaleSelector Hooks

Alternativ können Sie, wenn Sie Ihre eigene Locale-Selector-Komponente erstellen möchten, den useLocaleSelector Hook verwenden.

Dieser Hook gibt die aktuelle Locale, die Liste der von Ihrem Projekt unterstützten Locales und den useSetLocale Hook zurück.

Hier ist ein Beispiel, wie Sie den useLocaleSelector Hook verwenden können, um eine benutzerdefinierte Locale-Selector-Komponente zu erstellen.

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

function capitalizeLanguageName(language: string): string {
  if (!language) return '';
  return (
    language.charAt(0).toUpperCase() +
    (language.length > 1 ? language.slice(1) : '')
  );
}

export default function LocaleDropdown({ className }: { className?: string }) {
  // Retrieve the locale, locales, and setLocale function
  const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector();

  // Helper function to get the display name of a locale
  const getDisplayName = (locale: string) => {
    return capitalizeLanguageName(
      getLocaleProperties(locale).nativeNameWithRegionCode
    );
  };

  // If no locales are returned, just render nothing or handle gracefully
  if (!locales || locales.length === 0 || !setLocale) {
    return null;
  }

  return (
    <Select onValueChange={setLocale} defaultValue={locale}>
      <SelectTrigger>
        <SelectValue placeholder='Select language' />
      </SelectTrigger>
      <SelectContent className='z-[200!important]' position='popper'>
        <SelectGroup>
          {!locale && <SelectItem value='' />}

          {locales.map((locale) => (
            <SelectItem key={locale} value={locale} suppressHydrationWarning>
              {getDisplayName(locale)}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

Siehe die API-Referenz für weitere Informationen.

Nächste Schritte

• Erfahren Sie mehr über den useSetLocale Hook.
• Erfahren Sie mehr über die <LocaleSelector> Komponente.
• Erfahren Sie mehr über den useLocaleSelector Hook.
• Erfahren Sie mehr über Middleware i18n Routing.