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

## Resumen

El componente `<Tx>` traduce contenido JSX en runtime.

```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 la traducción de texto sin formato, así como de estructuras JSX complejas.
Además, ofrece funciones para manejar variables, plurales y traducciones específicas según el contexto.
`<Tx>` funciona solo del lado del servidor.

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

***


## Referencia

### Props

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

### Descripciones

| Prop       | Descripción                                                                                                                                                                               |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | El contenido que se va a traducir. Puede incluir texto sin formato o estructuras JSX.                                                                                                     |
| `context`  | Contexto adicional para afinar 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 preferida del navegador que sea compatible con tu aplicación. |
| `maxChars` | Un número máximo opcional de caracteres para la traducción. La biblioteca aplica estrictamente este límite.                                                                               |

***

## Comportamiento

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

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

Nuestra recomendación es que traduzcas 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 que solo uses traducciones bajo demanda, como `<Tx>` y [`tx`](/docs/next/api/strings/tx), cuando sea necesario.

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

***

## Ejemplos

### Uso básico

El componente `<Tx>` traducirá su contenido en tiempo de ejecución.

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

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

### Con variables

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

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

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

### Con plurales

El componente `<T>` también admite plurales mediante el componente `<Plural>`.

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

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  // [!code highlight] 
                one={<>You have an item.</>}  // [!code highlight] 
                other={<>You have items.</>}  // [!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/server';

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, cualquier contenido que esté *literalmente* entre los dos `<Tx>` del archivo se traducirá.
  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 de tu aplicación en runtime.
* Usa el componente `<Tx>` para traducir texto sin formato o estructuras JSX, incluidas las variables y la pluralización.

## Próximos pasos

* Para las traducciones en tiempo de compilación, consulta el componente [`<T>`](/docs/next/api/components/t).
* Para funciones 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).