# gt-next: General Translation Next.js SDK: Changer de langue
URL: https://generaltranslation.com/fr/docs/next/guides/languages.mdx
---
title: Changer de langue
description: Comment configurer et passer d’une langue à l’autre dans votre application Next.js
---

Le changement de langue permet aux utilisateurs de modifier le paramètre régional préféré du contenu de votre application. GT Next propose plusieurs approches, du simple basculement programmatique à un routage complet basé sur l’URL avec un middleware.

## Méthodes disponibles

* **Programmatique** : hook [`useSetLocale`](/docs/next/api/helpers/use-set-locale) pour des contrôles personnalisés
* **Interface utilisateur prédéfinie** : composant [`<LocaleSelector>`](/docs/next/api/components/locale-selector) avec menu déroulant
* **Interface utilisateur personnalisée** : hook [`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector) pour créer des sélecteurs personnalisés
* **Basé sur l’URL** : [routage par middleware](/docs/next/guides/middleware) pour le paramètre régional dans les chemins d’URL

## Utilisation du hook `useSetLocale`

Le hook [`useSetLocale`](/docs/next/api/helpers/use-set-locale) est un hook côté client qui vous permet de modifier la langue de votre application :

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

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

  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}
```

Il suffit de passer en argument à la fonction renvoyée par le hook le paramètre régional vers lequel vous souhaitez basculer.


## Utilisation du composant `<LocaleSelector>`

Le composant [`<LocaleSelector>`](/docs/next/api/components/locale-selector) fournit une liste déroulante prête à l’emploi qui affiche automatiquement tous les paramètres régionaux définis dans la configuration :

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

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

Ce composant :

* Affiche tous les paramètres régionaux configurés pour votre projet
* Affiche les paramètres régionaux dans le nom natif de chaque langue
* Gère la logique de changement de paramètre régional
* Conserve l’état de la sélection en cours


## Utiliser le hook `useLocaleSelector`

Si vous souhaitez créer votre propre composant de sélection du paramètre régional, utilisez [`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector) :

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

function CustomLocaleSelector() {
  const { 
    locale,              // Paramètre régional actif (ex. : 'en', 'es')
    locales,             // Tableau des paramètres régionaux supportés par votre projet ['en', 'es', 'fr']
    setLocale,           // Fonction pour changer le paramètre régional : setLocale('es')
    getLocaleProperties  // Fonction pour obtenir les informations d'affichage d'un paramètre régional
  } = 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} {/* 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 le paramètre régional dans vos URL via le routage par middleware. Vous trouverez plus d’informations sur cette approche dans le [Guide du middleware](/docs/next/guides/middleware) :

```
/en/products  → English products page  
/es/products  → Spanish products page
/fr/products  → French products page
```

Cette approche offre des avantages en matière de SEO, des liens directs vers les versions dans chaque langue et des liens localisés pouvant être partagés.


## Remarques importantes

### Composants côté client uniquement

Tous les hooks et composants de changement de langue doivent être utilisés dans des composants côté client marqués par `'use client'` :

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

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


### Prérequis : GTProvider

Les composants de changement de langue doivent être utilisés dans un [`<GTProvider>`](/docs/next/api/components/gtprovider) :

```tsx
// ✅ Correct
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

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


## Étapes suivantes

* [Guide du middleware](/docs/next/guides/middleware) - Routage des langues basé sur l’URL
* [Guide du contenu dynamique](/docs/next/guides/dynamic-content) - Traduction du contenu en exécution
* Références de l’API :
  * [Hook `useSetLocale`](/docs/next/api/helpers/use-set-locale)
  * [Composant `<LocaleSelector>`](/docs/next/api/components/locale-selector)