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 sustituyen por su value.

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 (1) almacenan en la CDN (Red de Distribución de Contenido) o (2) almacenan en la salida de compilación de tu aplicación, según tu configuración. A partir de ahí, el contenido traducido se sirve a tus usuarios. Si no se encuentra una traducción, se usará el 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 msg traducirá el contenido bajo demanda. Esto es útil para prototipar cómo se verá tu app en diferentes idiomas. Recuerda agregar una clave de API de desarrollo 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 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 del ICU message format

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

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

const encodedString = 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(encodedString)}
    </p>
  );
}

Notas

• La función msg marca cadenas para su traducción.
• Las traducciones de cadenas con msg se realizan antes de la ejecución, durante el proceso de compilación (salvo en desarrollo).

Próximos pasos

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