Descripción general

La función useMessages es un hook para traducir cadenas codificadas de msg durante la compilación.

const m = useMessages();

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

Referencias

Parámetros

Ninguno

Valor de retorno

Una función de callback m que traduce el contenido codificado proporcionado en msg.

(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 tu aplicación se implemente. 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 recurrirá al contenido original como contenido de respaldo predeterminado.

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

En desarrollo, verás un retraso al traducir 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 useMessages para traducir cadena codificada de msg.

import { msg, useMessages } from 'gt-next';

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

export default function TranslateGreeting() {
  const m = useMessages();

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

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

Uso de variables

Puedes pasar variables a cadenas de texto codificadas.

import { msg, useMessages } from 'gt-next';

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

export default function TranslateGreeting() {
  const m = useMessages();

  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 pasadas a msg sobrescribirán las variables pasadas a m.

import { msg, useMessages } from 'gt-next';

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

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

Nota: Esto mostrará "Hello, Alice!"; la variable no se sobrescribe al momento de renderizar.

Uso del ICU message format

gt-next admite el ICU message format, lo que también te permite formatear tus variables.

import { msg, useMessages } from 'gt-next';

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 function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

Importar desde gt-next/client

Si estás usando la directiva "use client", debes importar desde gt-next/client en lugar de gt-next.

"use client";
import { msg, useMessages } from 'gt-next/client';

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

export default function TranslateGreeting() {
  const m = useMessages();

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

Notas

• La función useMessages es un hook que traduce cadenas codificadas de msg.
• Las traducciones con useMessages se resuelven antes de la ejecución, durante el proceso de compilación (excepto en desarrollo).

Próximos pasos

• Consulta getMessages para obtener traducciones asíncronas de cadenas a partir de cadenas codificadas durante el build.
• Consulta msg para codificar cadenas para su traducción.
• Para traducciones en tiempo de ejecución, consulta tx y <Tx>.