Cambiar 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 inicio rápido antes de continuar.

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

Usando el hook useSetLocale()
Usando el componente <LocaleSelector>
Usando el hook useLocaleSelector()
Usando enrutamiento i18n de middleware

Cubriremos los primeros tres métodos en esta guía. Consulta la guía de enrutamiento de middleware para obtener más información sobre cómo cambiar el idioma de tu aplicación usando middleware.

Uso del hook `useSetLocale`

El hook useSetLocale es un hook del lado del cliente que te permite cambiar el idioma de tu aplicación. Debe usarse 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 la configuración regional a la que deseas cambiar como argumento de la función de devolución que retorna el hook useSetLocale.

Uso del componente `<LocaleSelector>`

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

Esta es una interfaz de usuario básica en forma de menú desplegable que muestra todos los idiomas que has habilitado en tu proyecto y permite a los usuarios seleccionar un idioma diferente.

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

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

Uso del 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 que tu proyecto soporta y el hook useSetLocale.

Aquí tienes un ejemplo de cómo usar el hook useLocaleSelector para crear un componente selector de idioma personalizado.

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

function capitalizeLanguageName(language: string): string {
  if (!language) return '';
  return (
    language.charAt(0).toUpperCase() +
    (language.length > 1 ? language.slice(1) : '')
  );
}

export default function LocaleDropdown({ className }: { className?: string }) {
  // Retrieve the locale, locales, and setLocale function
  const { locale, locales, setLocale } = useLocaleSelector();

  // Helper function to get the display name of a locale
  const getDisplayName = (locale: string) => {
    return capitalizeLanguageName(
      getLocaleProperties(locale).nativeNameWithRegionCode
    );
  };

  // If no locales are returned, just render nothing or handle gracefully
  if (!locales || locales.length === 0 || !setLocale) {
    return null;
  }

  return (
    <Select onValueChange={setLocale} defaultValue={locale}>
      <SelectTrigger>
        <SelectValue placeholder='Select language' />
      </SelectTrigger>
      <SelectContent className='z-[200!important]' position='popper'>
        <SelectGroup>
          {!locale && <SelectItem value='' />}

          {locales.map((locale) => (
            <SelectItem key={locale} value={locale} suppressHydrationWarning>
              {getDisplayName(locale)}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

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

Próximos pasos

Obtén más información sobre el hook useSetLocale.
Obtén más información sobre el componente <LocaleSelector>.
Obtén más información sobre el hook useLocaleSelector.
Obtén más información sobre el enrutamiento i18n con middleware.

Cambiar idiomas

Descripción general

Uso del hook useSetLocale

Uso del componente <LocaleSelector>

Uso del hook useLocaleSelector

Próximos pasos

En esta página

Uso del hook `useSetLocale`

Uso del componente `<LocaleSelector>`

Uso del hook `useLocaleSelector`