# gt-next: General Translation Next.js SDK: Tx
URL: https://generaltranslation.com/es/docs/next/api/components/tx.mdx
---
title: Tx
description: Referencia de la API del componente Tx
---

## resumen

El componente `<Tx>` traduce contenido JSX en tiempo de ejecución.

```jsx
{/* [!code highlight] */}
<Tx>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</Tx> // [!code highlight]
```

El componente `<Tx>` admite traducir tanto texto sin formato como estructuras JSX complejas.
Además, proporciona funcionalidades para manejar variables, plurales y traducciones específicas del contexto.
`<Tx>` solo funciona del lado del servidor.

<Callout>
  **Traducción en tiempo de ejecución:**
  Las traducciones con `<Tx>` se realizan en tiempo de ejecución.
  Esto significa que la traducción se realizará en tiempo real.
</Callout>

***


## Referencia

### Propiedades

<TypeTable
  type={{
  "children": {
      type: 'any',
      optional: false,
  },
  "context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "locale?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descripciones

| Prop       | Descripción                                                                                                                                                                      |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | El contenido que se traducirá. Puede incluir texto sin formato o estructuras JSX.                                                                                                |
| `context`  | Contexto adicional para refinar la traducción. Útil para resolver frases ambiguas.                                                                                               |
| `locale`   | Una configuración regional opcional para usar en la traducción. De forma predeterminada, se usará la configuración regional compatible preferida del navegador en tu aplicación. |

***

## Comportamiento

`<Tx>` traduce JSX en tiempo de ejecución.
Esto significa que las traducciones se realizan en tiempo real, por lo que puedes traducir contenido que solo se conoce en tiempo de ejecución.
La desventaja es que hay una demora mientras se carga una traducción bajo demanda, lo que resulta significativamente más lento.

Mientras se carga, `<Tx>` devolverá undefined, a menos que los idiomas sean similares (en-US vs en-GB), aunque este comportamiento puede personalizarse con la configuración de renderizado.
Si se produce un error, `<Tx>` devolverá el contenido original.

Nuestra recomendación es traducir todo lo posible en tiempo de compilación usando [`<T>`](/docs/next/api/components/t), [`getGT`](/docs/next/api/strings/use-gt) o [`useGT`](/docs/next/api/strings/use-gt),
y usar traducciones bajo demanda, como `<Tx>` y [`tx`](/docs/next/api/strings/tx), solo cuando sea necesario.

Asegúrate de seguir la [guía de despliegue aquí](/docs/next/tutorials/quickdeploy).

***

## Ejemplos

### Uso básico

El componente `<Tx>` traduce sus elementos hijo en tiempo de ejecución.

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

export default function Greeting() {
    return (
        {/* [!code highlight] */}
        <Tx id="greeting">
            Hello, world!
        </Tx> // [!code highlight]
    );
}
```


### Con variables

Puedes usar el componente `<Var>` para marcar los elementos hijo como variables.
Esto te permite marcar contenido que no debe traducirse.

```jsx title="DynamicGreeting.jsx" copy
import { Tx, Var } from 'gt-next';

export default function DynamicGreeting(user) {
    return (
        <Tx>
            {/* [!code highlight] */}
            Hola, <Var>{user.name}</Var>
        </Tx>
    );
}
```


### Con plurales

El componente `<T>` también admite la pluralización mediante el componente `<Plural>`.

```jsx title="ItemCount.jsx" copy
import { Tx, Plural } from 'gt-next';

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  // [!code highlight] 
                one={<>Tienes un artículo.</>}  // [!code highlight] 
                other={<>Tienes artículos.</>}  // [!code highlight] 
            // [!code highlight]
            />  
        </Tx>
    );
}
```


### Limitaciones

La función `<Tx>` solo traduce los elementos descendientes.

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

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <Tx>
            {/* [!code highlight] */}
            <div><b>This is valid!</b></div> // se traducirá 

            {/* [!code highlight] */}
            <ValidTranslation> // se traducirá 
            {/* [!code highlight] */}
                Hello, world!
            {/* [!code highlight] */}
            </ValidTranslation>

            <InvalidTranslation /> // no se traducirá
        </Tx>
    );
}
```

<Callout>
  **Nota:** Como regla general, se traducirá cualquier contenido que esté *literalmente* entre los dos `<Tx>` del archivo.
  Siempre puedes añadir otro `<Tx>` para traducir el contenido que no se está traduciendo, aunque no se recomienda anidar componentes `<Tx>`.
</Callout>

***


## Notas

* El componente `<Tx>` está diseñado para traducir contenido en tu aplicación en tiempo de ejecución.
* Usa el componente `<Tx>` para traducir texto sin formato o estructuras de JSX, incluidas variables y pluralización.

## Próximos pasos

* Para las traducciones en tiempo de compilación, consulta el componente [`<T>`](/docs/next/api/components/t).
* Para funcionalidades más avanzadas, consulta la [referencia de `<T>`](/docs/next/guides/t).
* Para traducir cadenas, consulta [`tx`](/docs/next/api/strings/tx), [`getGT`](/docs/next/api/strings/get-gt) y [`useGT`](/docs/next/api/strings/use-gt).