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é à 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>;
}

Il suffit de fournir la locale vers laquelle vous souhaitez changer en tant qu'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élection de langue, vous pouvez utiliser le hook useLocaleSelector.

Ce hook retourne la langue actuelle, la liste des langues prises en charge par votre projet, ainsi que le hook useSetLocale.

Voici un exemple d'utilisation du hook useLocaleSelector pour créer un composant personnalisé de sélection de langue.

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

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 } = 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.