Cambio de Idiomas

Descripción general

En esta guía, te mostraremos cómo cambiar el idioma de tu aplicación Next.js.

Si aún no has configurado tu aplicación con gt-next, consulta la guía de configuración antes de continuar.

Configuración

Hay tres formas de cambiar el idioma de tu aplicación usando gt-next.

1. Usando el hook useSetLocale()
2. Usando el componente <LocaleSelector>
3. Usando el hook useLocaleSelector()

Cubriremos los tres métodos en esta guía.

Usando el hook useSetLocale

El hook useSetLocale es un hook del lado del cliente que te permite cambiar el idioma de tu aplicación. Debe utilizarse dentro de un componente GTProvider.

import { useSetLocale } from 'gt-next/client';
export default function MyComponent() {
  const setLocale = useSetLocale();
 
  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}

Simplemente proporciona el idioma al que quieres cambiar como argumento a la función de callback devuelta por el hook useSetLocale.

Usando el componente <LocaleSelector>

El componente <LocaleSelector> es un componente del lado del cliente que te permite cambiar el idioma de tu aplicación. Debe utilizarse dentro de un componente GTProvider.

Este es un menú desplegable básico que muestra todos los idiomas que has habilitado en tu proyecto, y permite a los usuarios seleccionar un idioma diferente.

'use client';
import { LocaleSelector } from 'gt-next/client';
 
export default function MyComponent() {
  return <LocaleSelector />;
}

Usando el hook useLocaleSelector

Alternativamente, si deseas crear tu propio componente selector de idioma, puedes usar el hook useLocaleSelector.

Este hook devuelve el idioma actual, la lista de idiomas y el hook useSetLocale.

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

Consulta la referencia de la API para obtener más información.

Próximos pasos

• Aprende más sobre el hook useSetLocale.
• Aprende más sobre el componente <LocaleSelector>.
• Aprende más sobre el hook useLocaleSelector.