Le changement de langue permet aux utilisateurs de définir leur locale préférée pour le contenu de votre application. GT Next propose plusieurs approches, allant d’un simple changement programmatique à un routage complet basé sur l’URL avec un middleware.

Méthodes disponibles

• Programmatiques : hook useSetLocale pour des contrôles personnalisés
• Interface prête à l’emploi : composant <LocaleSelector> avec menu déroulant
• Interface personnalisée : hook useLocaleSelector pour créer des sélecteurs personnalisés
• Basée sur l’URL : Routage via middleware pour la locale dans les chemins d’URL

Utiliser le hook useSetLocale

Le hook useSetLocale est un hook exécuté côté client qui permet de modifier la langue de votre application :

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

export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>Définir la langue</button>;
}

Il suffit de fournir le locale vers lequel vous souhaitez basculer comme argument à la fonction renvoyée par le hook.

Utiliser le composant <LocaleSelector>

Le composant <LocaleSelector> fournit un menu déroulant prêt à l’emploi qui affiche automatiquement toutes les locales configurées :

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

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

This component automatically:

• Affiche toutes les locales configurées pour votre projet
• Affiche les locales avec le nom de leur langue, dans leur forme native
• Gère la logique de changement
• Conserve l’état de sélection en cours

Utiliser le hook useLocaleSelector

Si vous souhaitez créer votre propre composant de sélection de locale, utilisez useLocaleSelector :

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

function CustomLocaleSelector() {
  const { 
    locale,              // Locale actuellement active (par ex., 'en', 'es')
    locales,             // Tableau des locales que votre projet prend en charge ['en', 'es', 'fr']
    setLocale,           // Fonction pour changer la locale : setLocale('es')
    getLocaleProperties  // Fonction pour obtenir les informations d'affichage d'une locale
  } = useLocaleSelector();
  
  if (!locales?.length) return null;
  
  return (
    <select 
      value={locale || ''} 
      onChange={(e) => setLocale(e.target.value)}
    >
      {locales.map((loc) => {
        const props = getLocaleProperties(loc);
        return (
          <option key={loc} value={loc}>
            {props.nativeNameWithRegionCode} {/* par ex., "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}

Changement de langue basé sur l’URL

Pour le SEO et une meilleure UX, vous pouvez inclure la locale dans vos URL à l’aide d’un routage via middleware. Vous trouverez plus d’informations sur cette approche dans le guide Middleware :

/en/products  → Page produits en anglais  
/es/products  → Page produits en espagnol
/fr/products  → Page produits en français

Cette approche offre des avantages en matière de SEO, des liens directs vers les versions par langue et des liens localisés partageables.

Remarques importantes

Uniquement dans les composants client

Tous les hooks et composants de changement de langue doivent être utilisés dans des composants client marqués avec 'use client' :

'use client';
import { useSetLocale } from 'gt-next/client';

function LanguageSwitcher() {
  const setLocale = useSetLocale();
  // ... logique du composant
}

Condition requise pour GTProvider

Les composants de changement de langue doivent être utilisés à l’intérieur d’un <GTProvider> :

// ✅ Correct
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

// ❌ Incorrect - en dehors du provider
<LanguageSwitcher />

Prochaines étapes

• Guide Middleware - Routage linguistique basé sur l’URL
• Guide du contenu dynamique - Traduction de contenu au moment de l’exécution
• Référence de l’API :
  • useSetLocale Hook
  • <LocaleSelector> Component