Descripción general

La función getGT es una función asíncrona que traduce cadenas en tiempo de compilación.

const t = await getGT();

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

Referencias

Parámetros

Ninguno

Devuelve

Una promesa de una función de devolución de llamada, t, que traduce el contenido proporcionado.

Promise<(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 implemente 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. A partir de ahí, el contenido traducido se entrega a tus usuarios. Si no se encuentra una traducción, se mostrará el contenido de respaldo predeterminado (el original).

Asegúrate de seguir la guía de implementación 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 aplicación en diferentes idiomas. Recuerda añadir una Dev API key a tu entorno para habilitar este comportamiento.

En desarrollo, verás un retraso durante la traducción bajo demanda. 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 getGT para traducir cadenas de texto.

import { getGT } from 'gt-next/server';

export default async function TranslateGreeting() {
  const t = await getGT();

  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 { getGT } from 'gt-next/server';

export default async function TraducirSaludo() {
  const t = await getGT();

  return (
    <p>
      {t('Hello, {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 { getGT } from 'gt-next/server';

export default async function TranslateGreeting() {
  const t = await getGT();
  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>
  );
}

Notas

• La función getGT es una función server-side que traduce cadenas.
• Las traducciones con getGT se realizan antes de la ejecución, durante el proceso de compilación (salvo en desarrollo).

Próximos pasos

• Consulta useGT para traducir cadenas del lado del cliente en tiempo de compilación.
• Para traducciones en tiempo de ejecución, consulta tx y <Tx>.