Changer de langue

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 vous référer au guide de démarrage rapide avant de continuer.

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()
4. En utilisant le routage i18n middleware

Nous couvrirons les trois premières méthodes dans ce guide. Consultez le guide routage middleware pour plus d'informations sur comment changer la langue de votre application en utilisant le middleware.

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é dans un composant GTProvider.

 } 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 comme argument à la fonction de rappel retourné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.

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électeur de locale, vous pouvez utiliser le hook useLocaleSelector.

Ce hook retourne la locale actuelle, la liste des locales que votre projet supporte, et le hook useSetLocale.

Voici un exemple de comment utiliser le hook useLocaleSelector pour créer un composant de sélecteur de locale personnalisé.

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>
  );
}

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.
• En savoir plus sur le routing i18n avec middleware.