Sprachen ändern

Überblick

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

Wenn Sie Ihre App noch nicht mit gt-next eingerichtet haben, lesen Sie bitte den Einrichtungsleitfaden, bevor Sie fortfahren.

Einrichtung

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

In dieser Anleitung werden wir alle drei Methoden behandeln.

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.

import { useSetLocale } from 'gt-next/client';
export default function MyComponent() {
  const setLocale = useSetLocale();
 
  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}

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

Verwendung der <LocaleSelector>-Komponente

Die <LocaleSelector>-Komponente ist eine clientseitige Komponente, die es Ihnen ermöglicht, die Sprache Ihrer App zu ändern. Sie muss innerhalb einer GTProvider-Komponente verwendet werden.

Dies ist ein einfaches UI-Dropdown, das alle Sprachen anzeigt, die Sie in Ihrem Projekt aktiviert haben, und es Benutzern ermöglicht, eine andere Sprache auszuwählen.

'use client';
import { LocaleSelector } from 'gt-next/client';
 
export default function MyComponent() {
  return <LocaleSelector />;
}

Verwendung des useLocaleSelector-Hooks

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

Dieser Hook gibt die aktuelle Sprache, die Liste der verfügbaren Sprachen und den useSetLocale-Hook zurück.

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

Weitere Informationen finden Sie in der API-Referenz.

Nächste Schritte

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