Descripción general

Esta guía es un tutorial paso a paso para traducir strings en tu app de Next.js con useGT, getGT y tx.

Requisitos previos

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

Traducción de textos

Componentes del lado del cliente

Para cualquier cadena en el lado del cliente, usa useGT. Recuerda que useGT debe llamarse dentro de un componente secundario de <GTProvider>.

import { useGT } from 'gt-next';

export default function MyComponent() {
  const t = useGT(); 
  return (
    <div>
      <h1>{t('Esta es una cadena 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('Esta es una cadena 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 strings, 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, usa useGT, getGT y tx.
• useGT y getGT traducen antes del despliegue, mientras que tx traduce en tiempo de ejecución. Usa tx con moderación.
• Puedes agregar variables a las cadenas usando 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 para useGT, getGT y tx.