# gt-next: General Translation Next.js SDK: Cambio de idioma
URL: https://generaltranslation.com/es/docs/next/guides/languages.mdx
---
title: Cambio de idioma
description: Cómo configurar y cambiar de idioma en tu aplicación Next.js
---

El cambio de idioma permite a los usuarios elegir la Configuración regional que prefieren para el contenido de tu aplicación. GT Next ofrece varios enfoques, desde un sencillo cambio programático hasta un enrutamiento completo basado en URL con middleware.

## Métodos disponibles

* **Programático**: hook [`useSetLocale`](/docs/next/api/helpers/use-set-locale) para controles personalizados
* **Interfaz de usuario predefinida**: componente [`<LocaleSelector>`](/docs/next/api/components/locale-selector) con menú desplegable
* **Interfaz de usuario personalizada**: hook [`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector) para crear selectores personalizados
* **Basado en URL**: [Enrutamiento con middleware](/docs/next/guides/middleware) para usar la Configuración regional en las rutas de la URL

## Uso del hook `useSetLocale`

El hook [`useSetLocale`](/docs/next/api/helpers/use-set-locale) es un hook del lado del cliente que te permite cambiar el idioma de tu aplicación:

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

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

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

Simplemente pasa la Configuración regional a la que quieres cambiar como argumento de la función que devuelve el hook.


## Uso del componente `<LocaleSelector>`

El componente [`<LocaleSelector>`](/docs/next/api/components/locale-selector) proporciona un menú desplegable listo para usar que muestra automáticamente todas las Configuraciones regionales configuradas:

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

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

Este componente hace lo siguiente automáticamente:

* Muestra todas las Configuraciones regionales configuradas para tu proyecto
* Muestra las Configuraciones regionales con los nombres nativos de cada idioma
* Gestiona la lógica de cambio
* Mantiene el estado de la selección actual


## Uso del hook `useLocaleSelector`

Si quieres crear tu propio componente personalizado de selector de Configuración regional, usa [`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector):

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

function CustomLocaleSelector() {
  const { 
    locale,              // Configuración regional activa actual (p. ej., 'en', 'es')
    locales,             // Array de locales que admite tu proyecto ['en', 'es', 'fr']
    setLocale,           // Función para cambiar la configuración regional: setLocale('es')
    getLocaleProperties  // Función para obtener información de visualización de una configuración regional
  } = 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} {/* p. ej., "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```

## Cambio de idioma basado en URL

Para mejorar el SEO y la experiencia de usuario, puedes incluir la Configuración regional en tus URL mediante el enrutamiento con middleware. Puedes encontrar más información sobre este enfoque en la [guía de Middleware](/docs/next/guides/middleware):

```
/en/products  → Página de productos en inglés  
/es/products  → Página de productos en español
/fr/products  → Página de productos en francés
```

Este enfoque ofrece ventajas de SEO, enlaces directos a las versiones en distintos idiomas y enlaces localizados que se pueden compartir.


## Notas importantes

### Solo en componentes del lado del cliente

Todos los hooks y componentes para cambiar el idioma deben usarse en componentes del lado del cliente marcados con `'use client'`:

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

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

### Requisito de GTProvider

Los componentes para cambiar el idioma deben usarse dentro de un [`<GTProvider>`](/docs/next/api/components/gtprovider):

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

// ❌ Incorrecto - fuera del proveedor
<LanguageSwitcher />
```


## Siguientes pasos

* [Guía de Middleware](/docs/next/guides/middleware) - enrutamiento de idiomas basado en URL
* [Guía de contenido dinámico](/docs/next/guides/dynamic-content) - traducción de contenido en tiempo de ejecución
* Referencias de la API:
  * [Hook `useSetLocale`](/docs/next/api/helpers/use-set-locale)
  * [Componente `<LocaleSelector>`](/docs/next/api/components/locale-selector)