useGT()

Resumen

La función useGT() es un hook del lado del cliente para traducir cadenas de texto en tiempo de compilación.

const t = useGT();
 
<p>{  t('Este texto será traducido')  }</p>;

Referencia

Parámetros

Ninguno

Devuelve

Una función de devolución de llamada, t(), que traduce el contenido proporcionado.

(content: string, options?: InlineTranslationOptions) => string

Comportamiento

Producción

Durante el proceso de CD, cualquier contenido dentro de una función t() será traducido antes de que tu aplicación sea desplegada. Esto asegura tiempos de carga rápidos para todos los locales, pero solo puede traducir contenido conocido en el momento de la construcción.

Una vez generadas, las traducciones se almacenan (1) en el CDN o (2) en la salida de construcción de tu aplicación, según tu configuración. Desde allí, el contenido traducido se sirve a tus usuarios. Si no se encuentra una traducción, se recurrirá al contenido original.

Asegúrate de seguir la guía de despliegue aquí.

Desarrollo

Durante el desarrollo, la función t() traducirá el contenido bajo demanda. Esto es útil para prototipar cómo se verá tu aplicación en diferentes idiomas. Recuerda agregar una clave de API de desarrollo a tu entorno para habilitar este comportamiento.

Verás un retraso durante la traducción bajo demanda en desarrollo. Esto no ocurrirá durante las construcciones de producción a menos que el contenido se esté traduciendo explícitamente bajo demanda, es decir, usando tx() o <Tx>.

Ejemplo

Uso Básico

Puedes usar useGT() para traducir cadenas de texto.

"use client";
import { useGT } from 'gt-next/client';
 
export default function TranslateGreeting() {
  const t = useGT();
 
  return (
    <p>
      {t('Hello, Alice!')}
    </p>
  );
}

Nota: "Alice" se traducirá al idioma preferido del usuario.

Uso de variables

Puedes pasar variables a las traducciones del diccionario.

"use client";
import { useGT } from 'gt-next/client';
 
export default function TranslateGreeting() {
  const t = useGT();
 
  return (
    <p>
      {t('Hello, {name}!', { variables: { name: 'Alice' } })}
    </p>
  );
}

Nota: "Alice" no se traducirá al idioma preferido del usuario porque es una variable.

Notas

• La función useGT() es un hook del lado del cliente que traduce cadenas.
• Las cadenas de traducción con useGT() ocurren antes del tiempo de ejecución, durante el proceso de construcción (a menos que esté en desarrollo).

Próximos pasos

• Consulte getGT() para traducciones de cadenas del lado del servidor en tiempo de compilación.
• Para traducciones en tiempo de ejecución, consulte tx() y <Tx>.
• Consulte InlineTranslationOptions para obtener más información sobre cómo personalizar las traducciones.