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

## Descripción general

El componente `<T>` es el principal método de traducción de `gt-next`.

```jsx
<T>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T>
```

El componente `<T>` permite traducir tanto texto sin formato como estructuras JSX complejas.
Además, ofrece funciones para gestionar variables, plurales y traducciones según el contexto.

<Callout>
  **Traducción en tiempo de compilación:**
  Las traducciones de `<T>` se realizan en tiempo de compilación.
  Esto significa que la traducción se lleva a cabo antes del despliegue para reducir la latencia.
  Asegúrate de seguir la [guía de despliegue](/docs/next/tutorials/quickdeploy).
</Callout>

***


## Referencia

### Props

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

### Descripciones

| Prop       | Descripción                                                                                                                                 |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | El contenido que se va a traducir. Puede incluir texto sin formato o estructuras JSX.                                                       |
| `id`       | Un identificador único opcional para la cadena de traducción. Si no se proporciona, se genera uno automáticamente en tiempo de compilación. |
| `context`  | Contexto adicional para afinar la traducción. Útil para resolver frases ambiguas.                                                           |

### Devuelve

`React.JSX.Element|undefined`, que contiene la traducción renderizada o el contenido alternativo según la configuración proporcionada.

***

## Funcionamiento

### Producción

Durante el proceso de CD, cualquier elemento hijo dentro de un `<T>` se traducirá antes de desplegar tu aplicación.
Esto garantiza tiempos de carga rápidos para todas las configuraciones regionales, pero solo puede traducir contenido conocido en tiempo de compilación.

Una vez generadas, las traducciones se almacenan (1) en la CDN o (2) en el resultado de compilación de tu aplicación, según tu configuración.
Desde allí, el contenido traducido se entrega a tus usuarios.
Si no se encuentra una traducción, se usará el contenido original como fallback.

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

### Desarrollo

Durante el desarrollo, la función `<T>` traducirá el contenido bajo demanda.
Esto es útil para hacer prototipos de cómo se verá tu aplicación en distintos idiomas.
Recuerda agregar una clave de API de desarrollo a tu entorno para habilitar este comportamiento.

Mientras se carga, `<T>` devolverá undefined, salvo 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, `<T>` devolverá el contenido original.

Verás una demora al traducir bajo demanda en desarrollo.
Esta demora no se producirá en las compilaciones de producción, a menos que el contenido se esté traduciendo explícitamente bajo demanda,
es decir, mediante [`<Tx>`](/docs/next/api/components/tx) o [`tx`](/docs/next/api/strings/tx).

***

## Ejemplos

### Uso básico

El `<T>` traducirá sus elementos hijo.

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

export default function Greeting() {
    return (
        <T>
            Hello, world!
        </T>
    );
}
```


### Con variables

Puedes usar el componente `<Var>` para marcar sus elementos hijos como variables.
Esto te permite marcar contenido que no debe traducirse.
Por lo general, los componentes `<Var>` envuelven contenido dinámico.

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

export default function DynamicGreeting(user) {
    return (
        <T>
            Hello, <Var>{user.name}</Var>!
        </T>
    );
}
```


### Con plurales

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

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

export default function ItemCount({ count }) {
    return (
        <T>
            <Plural n={count} 
                one={<>You have an item.</>} 
                other={<>You have items.</>} 
            />
        </T>
    );
}
```


### Limitaciones

El componente `<T>` no traduce contenido que sea dinámico.

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

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* generará un error */}
        </T>
    );
}
```

La función `<T>` traduce sus elementos hijos.

```jsx title="Example.jsx" copy
import { T } 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 (
        <T>
            { /* [!code highlight] */}
            <div><b>This is valid!</b></div> {/* se traducirá */}

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

            <InvalidTranslation /> {/* no se traducirá */}
        </T>
    );
}
```

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

***


## Notas

* El componente `<T>` está diseñado para traducir contenido de tu aplicación. Es el método principal de localización en `gt-next`.
* Usa el componente `<T>` para traducir texto sin formato o estructuras JSX, incluidas las variables y la pluralización.
* Si usas el componente `<T>` en el cliente, asegúrate de envolverlo en un [`<GTProvider>`](/docs/next/api/components/gtprovider) para acceder al contexto de traducción.

## Próximos pasos

* Para las traducciones bajo demanda, consulta el componente [`<Tx>`](/docs/next/api/components/tx).
* 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).