# 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 alternar entre idiomas en tu aplicación Next.js
---

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

## Métodos disponibles

* **Por código**: hook [`useSetLocale`](/docs/next/api/helpers/use-set-locale) para controles personalizados
* **UI predefinida**: componente [`<LocaleSelector>`](/docs/next/api/components/locale-selector) con menú desplegable
* **UI 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 incluir 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 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>;
}
```

Solo proporciona 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) ofrece un menú desplegable listo para usar que muestra automáticamente todas las configuraciones regionales definidas:

```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 definidas para tu proyecto
* Muestra cada configuración regional con el nombre nativo de su 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 para seleccionar la 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 configuraciones regionales 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} {/* e.g., "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```

## Cambio de idioma según la 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  → English products page  
/es/products  → Spanish products page
/fr/products  → French products page
```

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


## Notas importantes

### Solo componentes de cliente

Todos los hooks y componentes para cambiar de idioma deben usarse en componentes de 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 de idioma deben usarse dentro de un [`<GTProvider>`](/docs/next/api/components/gtprovider):

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

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


## Próximos pasos

* [Guía de middleware](/docs/next/guides/middleware) - Enrutamiento por idioma basado en URL
* [Guía de contenido dinámico](/docs/next/guides/dynamic-content) - Traducción de contenido en runtime
* Referencias de la API:
  * [hook `useSetLocale`](/docs/next/api/helpers/use-set-locale)
  * [componente `<LocaleSelector>`](/docs/next/api/components/locale-selector)