Descripción general

La función useGT es un hook para traducir cadenas durante la 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, cualquier contenido dentro de una función t se traducirá antes de que se despliegue tu aplicación. 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) almacenan en la salida 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 recurrirá al contenido original como contenido de respaldo predeterminado.

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 app en distintos idiomas. Recuerda agregar una Dev API key a tu entorno para habilitar este comportamiento.

Verás una demora durante la traducción 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, Alice!')}
    </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 del ICU message format

gt-next es compatible con el 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 de cadenas asíncronas en tiempo de build.
• Para traducciones en tiempo de ejecución, consulta tx y <Tx>.