Descripción general

La función getMessages es una función asíncrona que traduce cadenas codificadas de msg durante la compilación.

const m = await getMessages();

<p>{  m(encodedString)  }</p>;

Referencia

Parámetros

Ninguno

Valores de retorno

Una promesa que se resuelve en una función de callback, m, que traduce el contenido codificado proporcionado en msg.

Promise<(encodedContent: string, options?: Record<string, any>) => string>

Comportamiento

Producción

Durante el proceso de CD, cualquier contenido dentro de una función msg 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 almacenan (1) en la CDN (Red de Distribución de Contenido) o (2) en la salida de compilación de tu aplicación, según tu configuración. Desde ahí, el contenido traducido se entrega a tus usuarios. Si no se encuentra una traducción, se usará el contenido de respaldo predeterminado o se mostrará el contenido original.

Asegúrate de seguir la guía de implementación aquí.

Desarrollo

Durante el desarrollo, la función m 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 getMessages para traducir cadenas codificadas de msg.

import { msg, getMessages } from 'gt-next/server';

const encodedGreeting = msg('¡Hola, Alicia!');

export default async function TranslateGreeting() {
  const m = await getMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

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

Uso de variables

Puedes pasar variables a las cadenas codificadas.

import { msg, getMessages } from 'gt-next/server';

const encodedGreeting = msg('Hello, {name}!');

export default async function TranslateGreeting() {
  const m = await getMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })} {/* Esto mostrará "¡Hola, Bob!" */}
    </p>
  );
}

Las variables de msg sobrescriben las variables de m

Cuando pasas variables tanto a msg como a m, las variables que pases a msg sobrescribirán las variables que pases a m.

import { msg, getMessages } from 'gt-next/server';

const encodedGreeting = msg('¡Hola, {name}!', { name: 'Alice' });

export default async function TranslateGreeting() {
  const m = await getMessages();
  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

Nota: Esto mostrará "Hello, Alice!": la variable no se sobrescribe en tiempo de renderizado.

Uso de ICU message format

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

import { msg, getMessages } from 'gt-next/server';

const encodedMessage = msg('Hay {count, plural, =0 {ningún artículo} =1 {un artículo} other {{count} artículos}} en el carrito', { count: 10 });

export default async function TranslateGreeting() {
  const m = await getMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

Notas

• La función getMessages es una función del lado del servidor que traduce cadenas codificadas de msg.
• Las cadenas traducidas con getMessages se generan antes de la ejecución, durante el proceso de compilación (salvo en desarrollo).

Próximos pasos

• Consulta useMessages para traducir cadenas en el lado del cliente a partir de cadenas codificadas en tiempo de compilación.
• Consulta msg para codificar cadenas para su traducción.
• Para traducciones en tiempo de ejecución, consulta tx y <Tx>.