# gt-next: General Translation Next.js SDK: Traducir cadenas
URL: https://generaltranslation.com/es/docs/next/tutorials/translating-strings.mdx
---
title: Traducir cadenas
description: Cómo traducir cadenas
---

## Resumen

Esta guía es un tutorial paso a paso para traducir cadenas en tu aplicación Next.js con
[`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) y [`tx`](/docs/next/api/strings/tx).

## Requisitos previos

Suponemos que ya has instalado `gt-next` en tu proyecto y que ya has seguido, o estás siguiendo, la [guía de inicio rápido](/docs/next).

## Traducir cadenas

### Componentes del lado del cliente

Para cualquier cadena del lado del cliente, usa [`useGT`](/docs/next/api/strings/use-gt).
Recuerda que `useGT` debe llamarse dentro de un componente hijo de [`<GTProvider>`](/docs/next/api/components/gtprovider).

```jsx title="src/components/MyComponent.jsx" copy
import { useGT } from 'gt-next';

export default function MyComponent() {
  const gt = useGT(); // [!code highlight]
  return (
    <div>
      <h1>{gt('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}
```


### Componentes del lado del servidor

Para las cadenas del lado del servidor, usa [`getGT`](/docs/next/api/strings/get-gt).

```jsx title="src/pages/index.jsx" copy
import { getGT } from 'gt-next/server';

export default async function Home() {
  const gt = await getGT(); // [!code highlight]
  return (
    <div>
      <h1>{gt('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}
```

<Callout>
  **Nota:**
  Durante el desarrollo, si traduces contenido en tiempo de ejecución, tendrás que recargar la página para ver la versión traducida de una cadena obtenida con [`getGT`](/docs/next/api/strings/get-gt).
  **Esto no ocurre en producción.**
</Callout>


### Agregar variables

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

```jsx title="MyComponent.jsx" copy
import { useGT } from 'gt-next';

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

Esto funciona tanto con [`useGT`](/docs/next/api/strings/use-gt) como con [`getGT`](/docs/next/api/strings/get-gt).


### Contenido dinámico

Supongamos que tienes una cadena variable.
Puedes usar la función [`tx`](/docs/next/api/strings/tx) para traducirla en tiempo de ejecución.

```jsx title="MyComponent.jsx" copy
import { tx } from 'gt-next/server';

export default async function MyComponent({ username }) {
  const translation = await tx(`Hello, ${username}. How is your day?`); // [!code highlight]
  return (
    <div>
      <h1>{translation}</h1> // [!code highlight]
    </div>
  );
}
```

<Callout>
  **Nota:**
  La función [`tx`](/docs/next/api/strings/tx) solo está disponible del lado del servidor y solo debe usarse cuando sea necesario.
  La traducción en tiempo de ejecución suele provocar demoras.
  Usa [`getGT`](/docs/next/api/strings/get-gt) o [`useGT`](/docs/next/api/strings/use-gt) siempre que sea posible para traducir antes del despliegue.
</Callout>

***


## Notas

* Para traducir cadenas, usa [`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) y [`tx`](/docs/next/api/strings/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 con el patrón `{ variables: { key: value } }`.

## Siguientes pasos

* Vuelve a la [guía de inicio rápido](/docs/next) para terminar de configurar tu proyecto para la traducción.
* Consulta la referencia de la API de [`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) y [`tx`](/docs/next/api/strings/tx).