Descripción general

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

const m = useMessages();

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

Referencias

Parámetros

Ninguno

Devuelve

Una función de devolución de llamada, m, que traduce el contenido codificado proporcionado desde msg.

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

Comportamiento

Producción

Durante el proceso de CD (Entrega/Despliegue continuos), cualquier contenido dentro de una función msg 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 contenidos) o (2) incluyen 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 usará 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 m traducirá el contenido bajo demanda. Esto es útil para crear prototipos de cómo se verá tu app en distintos idiomas. Recuerda agregar una Dev API key (clave de API de desarrollo) a tu entorno para habilitar este comportamiento.

Verás una latencia 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 useMessages para traducir cadenas codificadas 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 reemplazar variables en cadenas codificadas.

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, Bob!"; la variable 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, 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 trabajas bajo 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 cadenas se traducen con useMessages antes de la ejecución, durante el proceso de compilación (salvo en desarrollo).

Próximos pasos

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