Descripción general

Esta guía es un tutorial paso a paso sobre cómo traducir strings en tu app de Next.js usando useGT, getGT y tx.

Requisitos previos

Suponemos que ya tienes instalado gt-next en tu proyecto y que seguiste o estás siguiendo la guía de inicio rápido.

Traducción de cadenas de texto

Componentes del cliente

Para cualquier cadena en el cliente, usa useGT. Recuerda que useGT debe invocarse dentro de un componente hijo de <GTProvider>.

import { useGT } from 'gt-next';

export default function MyComponent() {
  const t = useGT(); 
  return (
    <div>
      <h1>{t('Este es un texto que se traduce')}</h1> // [!code highlight]
    </div>
  );
}

Componentes del lado del servidor

Para cualquier cadena del lado del servidor, utiliza getGT.

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

export default async function Home() {
  const t = await getGT(); 
  return (
    <div>
      <h1>{t('Este es un texto que se traduce')}</h1> // [!code highlight]
    </div>
  );
}

Agregar variables

Las variables son valores que pueden cambiar, pero no se traducen. Para agregar variables a tus cadenas, usa el siguiente patrón:

import { useGT } from 'gt-next';

export default function MyComponent() {
  const t = useGT();
  return (
    <div>
      <h1>{t('Hola, {username}', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
    </div>
  );
}

Esto funciona tanto con useGT como con getGT.

Contenido dinámico

Supongamos que tienes una cadena que cambia. Puedes usar la función tx para traducir la cadena en tiempo de ejecución.

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

export default async function MyComponent({ username }) {
  const translation = await tx(`Hola, ${username}. ¿Cómo va tu día?`); 
  return (
    <div>
      <h1>{translation}</h1> // [!code highlight]
    </div>
  );
}

Notas

• Para traducir cadenas, utiliza useGT, getGT y tx.
• useGT y getGT traducen antes del despliegue, mientras que tx traduce en tiempo de ejecución. Utiliza tx con moderación.
• Puedes añadir variables a las cadenas con el patrón { variables: { key: value } }.

Próximos pasos

• Vuelve a la Guía de inicio rápido para terminar de configurar tu proyecto para la traducción.
• Consulta la Referencia de API de useGT, getGT y tx.