# gt-next: General Translation Next.js SDK: El componente T
URL: https://generaltranslation.com/es/docs/next/guides/t.mdx
---
title: El componente T
description: Cómo internacionalizar componentes JSX con el componente T
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita el template en content/docs-templates/. */}

El [componente `<T>`](/docs/next/api/components/t) es la herramienta principal para internacionalizar el contenido JSX de tu aplicación Next.js. Envuelve tus elementos JSX y los traduce automáticamente según la configuración regional del usuario.

<Callout>
  **Consejo:** Con la [inyección automática de JSX](/docs/cli/features/auto-jsx-injection) habilitada, el compilador puede envolver automáticamente tu JSX en componentes de traducción en tiempo de construcción.
  Puede que no necesites añadir `<T>` manualmente en la mayoría de los casos. Aun así, usar `<T>` manualmente sigue siendo útil cuando necesitas un control más preciso, como establecer un `id` o un `context` específicos.
</Callout>

## Inicio rápido

Transforma cualquier contenido JSX estático envolviéndolo en [`<T>`](/docs/next/api/components/t):

```jsx
import { T } from 'gt-next';

// Antes
function Greeting() {
  return <p>Hello, world!</p>;
}

// Después
function Greeting() {
  return <T><p>Hello, world!</p></T>;
}
```

Para el contenido dinámico dentro de [`<T>`](/docs/next/api/components/t), usa [Componentes de variable](/docs/next/guides/variables) y [Componentes de ramificación](/docs/next/guides/branches).

## Uso básico

El [componente `<T>`](/docs/next/api/components/t) acepta cualquier contenido JSX como elemento secundario:

```jsx
// Texto simple
<T>Welcome to our app</T>

// Elementos HTML
<T><h1>Page Title</h1></T>

// JSX anidado complejo
<T>
  <div className="alert">
    <span>Important:</span> Please read carefully.
  </div>
</T>
```

## Opciones de configuración

### Añadir contexto

Proporciona contexto para la traducción de términos ambiguos:

```jsx
<T context="notification popup, not bread">
  Click the toast to dismiss
</T>
```


## Cuándo usar T

Usa [`<T>`](/docs/next/api/components/t) **solo con contenido estático**:

```jsx
// ✅ El contenido estático funciona
<T>
  <button>Click here</button>
  <h1>Welcome to our site</h1>
</T>

// ❌ El contenido dinámico falla
<T>
  <p>Hello {username}</p>
  <p>Today is {new Date()}</p>
</T>

// ✅ Usa componentes de variable para contenido dinámico
<T>
  <p>Hello <Var>{username}</Var></p>
</T>
```

<Callout>
  Los componentes de variable y de ramificación están diseñados para usarse dentro de [`<T>`](/docs/next/api/components/t) con contenido dinámico.
  Consulta las guías de [Componentes de variable](/docs/next/guides/variables) y [Componentes de ramificación](/docs/next/guides/branches) para más detalles.
</Callout>


## Ejemplos

### Elementos simples

```jsx
// Texto básico
<T>Hello, world!</T>

// Botón con texto
<T><Button>Submit Form</Button></T>

// Encabezado con estilos
<T><h1 className="text-2xl font-bold">Welcome</h1></T>
```


### Componentes complejos

```jsx
// Menú de navegación
<T>
  <nav className="navbar">
    <a href="/about">About Us</a>
    <a href="/contact">Contact</a>
  </nav>
</T>

// Mensaje de alerta
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>Your session expires in 5 minutes</span>
  </div>
</T>
```


### Con variables

Puedes usar componentes de variable para aplicar formato localizado.

```jsx
// Combinando texto estático con valores dinámicos
<T>
  <p>Welcome back, <Var>{user.name}</Var>!</p>
  <p>You have <Num>{user.friends.length}</Num> friends online</p>
  <p>Your birthday is <DateTime>{user.birthday}</DateTime></p>
  <p>Your balance is <Currency>{user.balance}</Currency></p>
</T>
```

<Callout>
  Más información sobre el [componente `<Var>`](/docs/next/api/components/var) en la [guía de componentes de variable](/docs/next/guides/variables).
</Callout>


## Configuración para producción

### Proceso de compilación

Añade la traducción a tu flujo de compilación:

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### Comportamiento en desarrollo vs. producción

* **Desarrollo**: Con una clave API de desarrollo, las traducciones se realizan on-demand a medida que se renderizan los componentes. Verás traducciones en tiempo real mientras desarrollas.
* **Producción**: Todas las traducciones se generan previamente durante la etapa de compilación y estarán visibles una vez que tu aplicación esté en producción.

Configura tu clave API de desarrollo en tu entorno para activar la traducción en tiempo real durante el desarrollo. Puedes crearla en el Dashboard, en [API Keys](https://dash.generaltranslation.com/en-US/project/api-keys).

### Consideraciones de privacidad

El contenido de los componentes [`<T>`](/docs/next/api/components/t) se envía a la API de GT para su traducción. Para datos sensibles, usa [Componentes de variable](/docs/next/guides/variables) para mantener la información privada de forma local:

```jsx
// Seguro - los datos sensibles se mantienen locales
<T>
  Welcome back, <Var>{username}</Var>
</T>
```


## Cuánto incluir en un solo `<T>`

Envuelve **bloques lógicos de contenido**: contenido que un traductor leería y traduciría de forma natural en conjunto.

```jsx
// ✅ Bien — agrupar contenido relacionado da a los traductores contexto completo
<T>
  <h1>Welcome to Our Platform</h1>
  <p>Get started in minutes with our simple setup process.</p>
</T>

// ✅ Bien — cada tarjeta es una unidad independiente
{features.map((feature) => (
  <T key={feature.id}>
    <h3><Var>{feature.title}</Var></h3>
    <p><Var>{feature.description}</Var></p>
  </T>
))}

// ❌ Demasiado fragmentado — divide la traducción y pierde contexto
<T><h1>Welcome to Our Platform</h1></T>
<T><p>Get started in minutes with our simple setup process.</p></T>

// ❌ Demasiado amplio — envolver toda la página dificulta el mantenimiento
<T>
  {/* ...cientos de líneas de JSX... */}
</T>
```

**Regla práctica:** si el texto guarda relación visual o semántica, envuélvelo en un solo `<T>`. Divídelo solo cuando el contenido sea realmente independiente (p. ej., una cabecera frente a un pie de página).

Envolver más contenido en un solo `<T>` proporciona más contexto a los traductores, lo que da lugar a traducciones más naturales: algunos idiomas reestructuran las frases o necesitan hacer referencia al contenido cercano.


## Problemas comunes

### Límites entre componentes

[`<T>`](/docs/next/api/components/t) solo traduce los elementos secundarios directos, no el contenido dentro de otros componentes:

```jsx
// ❌ Incorrecto - el contenido dentro de los componentes no se traducirá
function MyComponent() {
  return <p>Esto no se traducirá</p>;
}

<T>
  <h1>Esto se traducirá</h1>
  <MyComponent /> {/* El contenido interno no se traducirá */}
</T>

// ✅ Correcto - envuelve cada componente de forma individual
function MyComponent() {
  return <T><p>Esto se traducirá</p></T>;
}

<T><h1>Esto se traducirá</h1></T>
<MyComponent />
```


### Componentes T anidados

```jsx
// ❌ No anides componentes <T>
<T>
  <T>Hello world</T> {/* No hagas esto */}
</T>
```


### Errores de contenido dinámico

La CLI mostrará un error si hay contenido dinámico en [`<T>`](/docs/next/api/components/t). Envuelve los valores dinámicos con componentes de variable:

```jsx
// ❌ Incorrecto - el contenido dinámico falla
<T><p>Hello {username}</p></T>

// ✅ Correcto - usa componentes de variable
<T><p>Hello <Var>{username}</Var></p></T>
```

<Callout>
  Consulta la [guía de componentes de variable](/docs/next/guides/variables) para manejar valores dinámicos y la [guía de componentes de ramificación](/docs/next/guides/branches) para contenido condicional.
</Callout>

## Próximos pasos

<Callout>
  **Míralo en acción:** Consulta la [aplicación de ejemplo de conceptos básicos del componente `<T>`](https://github.com/gt-examples/t-component-basics) para ver una demostración funcional — [vista previa en vivo](https://t-component-basics.generaltranslation.dev).
</Callout>

* [Guía de componentes de variable](/docs/next/guides/variables) - Maneja contenido dinámico en traducciones JSX
* [Guía de componentes de ramificación](/docs/next/guides/branches) - Agrega lógica condicional a tus traducciones