# gt-next: General Translation Next.js SDK: Cambio lingua
URL: https://generaltranslation.com/it/docs/next/guides/languages.mdx
---
title: Cambio lingua
description: Come configurare e passare da una lingua all'altra nella tua app Next.js
---

Il cambio di lingua consente agli utenti di modificare l'impostazione regionale preferita per i contenuti della tua applicazione. GT Next offre diversi approcci, dal semplice passaggio programmatico fino all'instradamento completo basato su URL con middleware.

## Metodi disponibili

* **Programmatico**: hook [`useSetLocale`](/docs/next/api/helpers/use-set-locale) per controlli personalizzati
* **UI predefinita**: componente [`<LocaleSelector>`](/docs/next/api/components/locale-selector) con menu a discesa
* **UI personalizzata**: hook [`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector) per creare selettori personalizzati
* **Basato sull&#39;URL**: [routing tramite middleware](/docs/next/guides/middleware) per l&#39;impostazione regionale nei percorsi dell&#39;URL

## Uso dell&#39;hook `useSetLocale`

L&#39;hook [`useSetLocale`](/docs/next/api/helpers/use-set-locale) è un hook lato client che ti consente di cambiare la lingua della tua app:

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

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

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

Ti basta passare come argomento alla funzione restituita dall&#39;hook l&#39;impostazione regionale a cui vuoi passare.


## Uso del componente `<LocaleSelector>`

Il componente [`<LocaleSelector>`](/docs/next/api/components/locale-selector) fornisce un menu a discesa pronto all&#39;uso che mostra automaticamente tutte le impostazioni regionali configurate:

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

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

Questo componente:

* Mostra tutte le impostazioni regionali configurate per il tuo progetto
* Visualizza le impostazioni regionali con i nomi nelle rispettive lingue native
* Gestisce la logica di selezione
* Mantiene lo stato della selezione corrente


## Utilizzo dell&#39;hook `useLocaleSelector`

Se vuoi creare un componente personalizzato per selezionare l&#39;impostazione regionale, usa [`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector):

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

function CustomLocaleSelector() {
  const { 
    locale,              // Impostazione regionale attiva corrente (es. 'en', 'es')
    locales,             // Array delle impostazioni regionali supportate dal progetto ['en', 'es', 'fr']
    setLocale,           // Funzione per cambiare l'impostazione regionale: setLocale('es')
    getLocaleProperties  // Funzione per ottenere le informazioni di visualizzazione di un'impostazione regionale
  } = 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} {/* es. "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```


## Cambio di lingua basato sull&#39;URL

Per migliorare la SEO e l&#39;esperienza utente, puoi includere l&#39;impostazione regionale negli URL usando il routing tramite middleware. Per maggiori informazioni su questo approccio, consulta la [guida al Middleware](/docs/next/guides/middleware):

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

Questo approccio offre vantaggi SEO, link diretti alle versioni in lingua e link localizzati condivisibili.


## Note importanti

### Solo i componenti client

Tutti gli hook e i componenti per il cambio di lingua devono essere utilizzati nei componenti client contrassegnati con `'use client'`:

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

function LanguageSwitcher() {
  const setLocale = useSetLocale();
  // ... logica del componente
}
```


### Requisito di GTProvider

I componenti per il cambio di lingua devono essere utilizzati all&#39;interno di un [`<GTProvider>`](/docs/next/api/components/gtprovider):

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

// ❌ Errato - fuori dal provider
<LanguageSwitcher />
```


## Passaggi successivi

* [Guida al middleware](/docs/next/guides/middleware) - Instradamento della lingua tramite URL
* [Guida ai contenuti dinamici](/docs/next/guides/dynamic-content) - Traduzione dei contenuti a runtime
* Riferimenti API:
  * [Hook `useSetLocale`](/docs/next/api/helpers/use-set-locale)
  * [Componente `<LocaleSelector>`](/docs/next/api/components/locale-selector)