Descripción general

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

const t = await getGT();

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

Referencias

Parámetros

Ninguno

Valores de retorno

Una promesa que resuelve en una función de callback, t, que traduce el contenido proporcionado.

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

Comportamiento

Producción

Durante el proceso de CD (Entrega/Despliegue Continuo), 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 locale, pero solo puede traducir contenido conocido en tiempo de compilación.

Una vez generadas, las traducciones se (1) almacenan en el CDN (Red de Distribución de Contenido) o (2) se almacenan en el artefacto 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 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 aplicación en diferentes idiomas. Recuerda agregar una Dev API key (clave de API de desarrollo) a tu entorno para habilitar este comportamiento.

Verás una pequeña 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 getGT para traducir textos.

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 de preferencia del usuario.

Uso de variables

Puedes pasar variables a las traducciones del diccionario.

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

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

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

export default async function TranslateGreeting() {
  const t = await getGT();
  return (
    <p>
      {t('Hay {count, plural, =0 {ningún elemento} =1 {un elemento} other {{count} elementos}} en el carrito', { count: 10 })}
    </p>
  );
}

Notas

• La función getGT es una función del lado del servidor que traduce cadenas.
• Las traducciones de cadenas 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 en el cliente durante el build.
• Para traducciones en tiempo de ejecución, consulta tx y <Tx>.