# 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 lo edites directamente. En su lugar, edita la plantilla 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 de Next.js. Envuelve tus elementos JSX y los traduce automáticamente según la configuración regional del usuario.


## Inicio rápido

Transforma cualquier contenido JSX estático envolviéndolo con [`<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 [componente de Variable](/docs/next/guides/variables) y [componente branching](/docs/next/guides/branches).

## Uso básico

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

```jsx
// Texto sencillo
<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 de traducción para 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 para **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 no funciona
<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 branching están diseñados para funcionar dentro de [`<T>`](/docs/next/api/components/t) con contenido dinámico.
  Consulta las guías de [componente de Variable](/docs/next/guides/variables) y [componente branching](/docs/next/guides/branches) para más detalles.
</Callout>

## Ejemplos

### Elementos sencillos

```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 dar formato de forma localizada.

```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>
  Obtén 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

Agrega la traducción a tu pipeline 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 bajo demanda cuando se renderizan los componentes. Verás la traducción en tiempo real mientras desarrollas.
* **Producción**: Todas las traducciones se generan previamente durante la fase de compilación y estarán visibles una vez que tu aplicación esté en producción.

Establece tu clave API de desarrollo en tu entorno para habilitar la traducción en tiempo real durante el desarrollo. Puedes crear una en el Panel de control, en [clave de API](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 [componente de Variable](/docs/next/guides/variables#privacy) para mantener la información privada en local:

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

## Problemas comunes

### Límites de los componentes

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

```jsx
// ❌ Incorrecto - el contenido dentro de los componentes no se traducirá
function MyComponent() {
  return <p>This won't be translated</p>;
}

<T>
  <h1>This will be translated</h1>
  <MyComponent /> {/* El contenido interno no se traducirá */}
</T>

// ✅ Correcto - envuelve cada componente individualmente
function MyComponent() {
  return <T><p>This will be translated</p></T>;
}

<T><h1>This will be translated</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 dará error si detecta 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 gestionar valores dinámicos y la [Guía de componente branching](/docs/next/guides/branches) para el contenido condicional.
</Callout>

## Siguientes pasos

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