Changer de langues

Aperçu

Dans ce guide, nous vous montrerons comment changer la langue de votre application Next.js.

Si vous n'avez pas encore configuré votre application avec gt-next, veuillez consulter le guide de configuration avant de continuer.

Configuration

Il existe trois façons de changer la langue de votre application en utilisant gt-next.

1. En utilisant le hook useSetLocale()
2. En utilisant le composant <LocaleSelector>
3. En utilisant le hook useLocaleSelector()

Nous allons couvrir ces trois méthodes dans ce guide.

Utilisation du hook useSetLocale

Le hook useSetLocale est un hook côté client qui vous permet de changer la langue de votre application. Il doit être utilisé à l'intérieur d'un composant GTProvider.

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

Fournissez simplement la locale vers laquelle vous souhaitez changer en tant qu'argument à la fonction de rappel renvoyée par le hook useSetLocale.

Utilisation du composant <LocaleSelector>

Le composant <LocaleSelector> est un composant côté client qui vous permet de changer la langue de votre application. Il doit être utilisé à l'intérieur d'un composant GTProvider.

Il s'agit d'un menu déroulant minimaliste qui affiche toutes les langues que vous avez activées dans votre projet, et permet aux utilisateurs de sélectionner une langue différente.

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

Utilisation du hook useLocaleSelector

Alternativement, si vous souhaitez créer votre propre composant de sélection de langue, vous pouvez utiliser le hook useLocaleSelector.

Ce hook renvoie la langue actuelle, la liste des langues disponibles, et le hook useSetLocale.

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

Consultez la référence API pour plus d'informations.

Prochaines étapes

• En savoir plus sur le hook useSetLocale.
• En savoir plus sur le composant <LocaleSelector>.
• En savoir plus sur le hook useLocaleSelector.