Descripción general

La función useGT es un hook para traducir cadenas en tiempo de compilación.

const t = useGT();

<p>{  t('Este texto se traducirá')  }</p>;

Referencias

Parámetros

Ninguno

Devuelve

Una función de retorno de llamada, t, que traduce el contenido proporcionado.

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

Comportamiento

Producción

Durante el proceso de CD (Entrega/Despliegue Continuos), cualquier contenido dentro de una función t se traducirá antes de que tu aplicación se despliegue. Esto garantiza tiempos de carga rápidos para todos los locales, pero solo puede traducir contenido conocido en tiempo de compilación.

Una vez generadas, las traducciones se (1) almacenan en la CDN (Red de Distribución de Contenido) o (2) incluyen en el artefacto de compilación de tu app, según tu configuración. Desde allí, el contenido traducido se entrega a tus usuarios. Si no se encuentra una traducción, se usará el contenido de respaldo predeterminado con el contenido original.

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

Desarrollo

Durante el desarrollo, la función t traducirá contenido bajo demanda. Esto es útil para crear prototipos de cómo se verá tu app en diferentes idiomas. Recuerda agregar una Dev API key a tu entorno para habilitar este comportamiento.

Verás una demora durante las traducciones bajo demanda en desarrollo. Esto no ocurrirá en las compilaciones 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 strings.

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('¡Hola, Alicia!')}
    </p>
  );
}

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

Uso de variables

Puedes pasar variables a las traducciones del diccionario.

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('¡Hola, {name}!', { name: 'Alice'  })}
    </p>
  );
}

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

Uso de ICU message format

gt-next es compatible con ICU message format, lo que también te permite formatear tus variables.

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('Hay {count, plural, =0 {ningún artículo} =1 {un artículo} other {{count} artículos}} en el carrito', { count: 10 })}
    </p>
  );
}

Importar desde gt-next/client

Si trabajas bajo la directiva "use client", debes importar desde gt-next/client en lugar de gt-next.

"use client";
import { useGT } from 'gt-next/client';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('¡Hola, Alice!')}
    </p>
  );
}

Notas

• La función useGT es un hook que traduce cadenas.
• La traducción de cadenas con useGT se realiza antes de la ejecución, durante el proceso de compilación (salvo en desarrollo).

Próximos pasos

• Consulta getGT para traducciones asíncronas de cadenas en tiempo de compilación (build time).
• Para traducciones en tiempo de ejecución (runtime), consulta tx y <Tx>.