Le changement de langue permet aux utilisateurs de définir la locale de leur choix pour le contenu de votre application. GT Next propose plusieurs approches, allant d’un simple changement par programmation à 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é sur l’URL : routage par middleware pour la locale dans les chemins d’URL

Utiliser le hook useSetLocale

Le hook useSetLocale est un hook côté client qui vous permet de changer 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 locale</button>;
}

Indiquez simplement le locale vers lequel vous souhaitez basculer comme argument de la fonction renvoyée par le hook.

Utiliser le composant <LocaleSelector>

Le composant <LocaleSelector> propose 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 />;
}

Ce composant effectue automatiquement les actions suivantes :

• Affiche toutes les locales configurées pour votre projet
• Affiche les locales avec leurs noms dans leur langue d’origine
• Gère la logique de changement
• Conserve l’état de la sélection en cours

Utiliser le hook useLocaleSelector

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

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

function CustomLocaleSelector() {
  const { 
    locale,              // Locale active actuelle (par ex. 'en', 'es')
    locales,             // Tableau des locales prises en charge par votre projet ['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>
  );
}

Commutation de langue basée sur l’URL

Pour le référencement et une meilleure UX, vous pouvez inclure le locale dans vos URL à l’aide du 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 apporte des avantages en matière de SEO, des liens directs vers les versions par langue et des liens localisés faciles à partager.

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
}

Prérequis 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 :
  • Hook useSetLocale
  • Composant <LocaleSelector>