Descripción general

La función msg marca y codifica cadenas para su traducción.

const encodedString = msg('¡Hola, mundo!');

La cadena codificada debe pasarse al hook useMessages o a la función getMessages para obtener las traducciones.

Decodificación

Para recuperar la cadena original, debes decodificarla con decodeMsg

import { msg, decodeMsg } from 'gt-next';
const encodedString = msg('¡Hola, mundo!');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // "¡Hola, mundo!"

Referencias

Parámetros

Devuelve

Una cadena codificada, en la que las variables interpoladas (si las hay) se reemplazan por sus valores.

Comportamiento

Producción

Durante el proceso de CD (Entrega/Despliegue continuos), 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 (1) almacenan en la CDN (Red de Distribución de Contenido) o (2) se incluyen en la salida de compilación de tu aplicación, según tu configuración. Desde allí, el contenido traducido se sirve 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 despliegue aquí.

Desarrollo

Durante el desarrollo, la función msg traducirá contenido bajo demanda. Esto es útil para prototipar cómo se verá tu app en distintos idiomas. Recuerda agregar una clave de API de desarrollo (Dev API key) a tu entorno para habilitar este comportamiento.

Verás una 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 msg para marcar cadenas para su traducción.

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

const encodedString = msg('¡Hola, mundo!');

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedString)}
    </p>
  );
}

Nota: "Hello, world!" se traducirá al idioma preferido del usuario.

Uso de variables

Puedes pasar variables a las traducciones del diccionario.

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

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

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

  return (
    <p>
      {m(encodedString)}
    </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 dar formato a tus variables.

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

const encodedString = msg('Hay {count, plural, =0 {ningún elemento} =1 {un elemento} other {{count} elementos}} en el carrito', { count: 10 });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedString)}
    </p>
  );
}

Notas

• La función msg sirve para marcar cadenas para su traducción.
• Las cadenas marcadas con msg se procesan antes de la ejecución, durante la fase de compilación (excepto en desarrollo).

Próximos pasos

• Consulta useMessages para traducir strings.
• Consulta getMessages para traducir strings en componentes asíncronos del lado del servidor.