# 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 para el componente `<T>`
---

## Resumen

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

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

El componente `<T>` admite traducir texto sin formato, así como estructuras JSX complejas.
Además, ofrece funciones para manejar 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 aquí](/docs/next/tutorials/quickdeploy).
</Callout>

***


## Referencia

### Props

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

### Descripciones

| Prop       | Descripción                                                                                                         |
| ---------- | ------------------------------------------------------------------------------------------------------------------- |
| `children` | El elemento hijo que se traducirá. Puede incluir texto sin formato o estructuras JSX.                                   |
| `id`       | Un identificador único de la cadena de traducción. Esto garantiza una traducción consistente en toda tu aplicación. |
| `context`  | Contexto adicional para precisar 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.

***

## Comportamiento

### Producción

Durante el proceso de CD, cualquier elemento hijo dentro de un `<T>` se traducirá antes de desplegar tu aplicación.
Esto garantiza un tiempo de carga rápido para todos los locales, 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 la salida de compilación de tu aplicación, según tu configuración.
A partir de ahí, el contenido traducido se sirve a tus usuarios.
Si no se encuentra una traducción, se usará el contenido original como alternativa.

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 resulta útil para prototipar cómo se verá tu aplicación en diferentes idiomas.
Recuerda añadir una clave API de desarrollo a tu entorno para habilitar este comportamiento.

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

Verás un retraso durante la traducción bajo demanda en desarrollo.
Este retraso 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

`<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 los elementos hijo como variables.
Esto te permite marcar contenido que no debe traducirse.
Normalmente, 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 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 su elemento hijo.

```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:** Una buena regla práctica es que 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 en 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>` del lado del cliente, asegúrate de que esté envuelto 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 funcionalidades más avanzadas, consulta la [referencia de `<T>`](/docs/next/guides/t).
* Para traducir cadena, consulta [`tx`](/docs/next/api/strings/tx), [`getGT`](/docs/next/api/strings/get-gt) y [`useGT`](/docs/next/api/strings/use-gt).