Traduciendo contenido dinámico

Descripción general

Esta guía te llevará paso a paso por el uso del componente <Tx> y la función tx() para traducir contenido dinámico en componentes de servidor de Next.js.

Al final de esta guía, aprenderás la sintaxis adecuada para utilizar estos componentes y funciones.

Cubriremos lo siguiente:

¿Qué es el contenido dinámico?

El contenido dinámico es aquel que no se conoce en tiempo de compilación.

Esto puede incluir cosas como variables, nombres de usuario, campos de entrada, etc.

Por ejemplo, lo siguiente es contenido dinámico:

const username = 'John Doe';
<p>Your username is {username}</p>

¿Cuándo deberías traducir contenido dinámico?

En la mayoría de los casos, puedes usar Variable Components o Branching Components para manejar contenido dinámico.

Estos componentes están diseñados para manejar contenido dinámico con el componente <T>, por lo que recomendamos usarlos siempre que sea posible.

Sin embargo, hay algunos casos en los que necesitas traducir contenido dinámico bajo demanda.

Por ejemplo, si tienes un mensaje de chat que es creado por un usuario y quieres mostrarlo en otro idioma, puedes usar gt-next para traducirlo bajo demanda.

Cómo usar el componente <Tx>

import { Tx } from 'gt-next';

const message = 'Hello, world!';
<Tx>{message}</Tx>

Simplemente envuelve cualquier contenido JSX que desees traducir con el componente <Tx>.

El componente <Tx> traducirá el contenido bajo demanda y mostrará el contenido traducido de forma asíncrona.

Consulta la referencia de la API para más información.

Cómo usar la función tx()

La función tx() es una función del lado del servidor que se puede usar para traducir cadenas de texto de manera dinámica.

import { tx } from 'gt-next/server';

const message = 'Hello, world!';
const translatedMessage = await tx(message);

La función tx() devuelve una promesa que se resuelve con la cadena traducida.

Consulta la referencia de la API para más información.

Ejemplos

Renderizando contenido dinámico

import { Tx } from 'gt-next';

export default function ChatMessage({ message }: { message: ReactNode }) {
  return (
    <Tx>{message}</Tx>
  );
}

Traduciendo una cadena

import { tx } from 'gt-next/server';

export default async function ChatMessage({ message }: { message: string }) {
  const translatedMessage = await tx(message);
  return (
    <div>{translatedMessage}</div>
  );
}

Consideraciones de producción

El comportamiento del componente <Tx> y la función tx() es el mismo en desarrollo que en producción.

Independientemente del tipo de clave API que utilices, el comportamiento es el mismo. En ambos casos, las traducciones se realizan en vivo, bajo demanda.

Errores comunes

Uso innecesario de <Tx> y tx()

Si estás utilizando el componente <Tx> o la función tx(), solo deberías hacerlo si realmente no puedes usar Componentes de Variables o Componentes de Ramas con el componente <T>.

Usar <Tx> y tx() cuando no es necesario es un desperdicio de recursos y rápidamente consumirá tu cuota de API.

Además, tu contenido se renderizará más lento, ya que las traducciones se completan bajo demanda.