El componente <T>
Cómo internacionalizar componentes JSX con el componente <T>
El <T> component es la herramienta principal para internacionalizar contenido JSX en tu aplicación de Next.js. Envuelve tus elementos JSX y los traduce automáticamente según el locale del usuario.
Inicio rápido
Transforma cualquier contenido JSX estático envolviéndolo con <T>:
import { T } from 'gt-next';
// Antes
function Greeting() {
return <p>¡Hola, mundo!</p>;
}
// Después
function Greeting() {
return <T><p>¡Hola, mundo!</p></T>;
}Para contenido dinámico dentro de <T>, usa Componentes de Variables y Componentes de Ramas.
Uso básico
El componente <T> acepta cualquier contenido JSX como children:
// Simple text
<T>Bienvenido a nuestra app</T>
// HTML elements
<T><h1>Título de la página</h1></T>
// Complex nested JSX
<T>
<div className="alert">
<span>Importante:</span> Lee atentamente.</span>
</div>
</T>Opciones de configuración
Agregar contexto
Proporciona contexto de traducción para términos ambiguos:
<T context="notification popup, not bread">
Haz clic en el toast para cerrarlo
</T>Definir IDs de traducción
Usa IDs explícitos para mantener traducciones consistentes:
<T id="welcome-message">
¡Bienvenido/a de nuevo, usuario!
</T>Cuándo usar <T>
Usa <T> solo para contenido estático:
// ✅ El contenido estático funciona
<T><button>Haz clic aquí</button></T>
<T><h1>Bienvenido a nuestro sitio</h1></T>
// ❌ El contenido dinámico falla
<T><p>Hola, {username}</p></T>
<T><p>Hoy es {new Date()}</p></T>
// ✅ Usa componentes Variable para contenido dinámico
<T>
<p>Hola, <Var>{username}</Var></p>
</T>Los componentes Variable y Branching están diseñados para usarse dentro de <T> con contenido dinámico. Consulta las guías Variable Components y Branching Components para más detalles.
Ejemplos
Elementos simples
// Basic text
<T>¡Hola, mundo!</T>
// Button with text
<T><Button>Enviar formulario</Button></T>
// Heading with styling
<T><h1 className="text-2xl font-bold">Bienvenido</h1></T>Componentes complejos
// Menú de navegación
<T>
<nav className="navbar">
<a href="/about">Acerca de</a>
<a href="/contact">Contacto</a>
</nav>
</T>
// Mensaje de alerta
<T>
<div className="alert alert-warning">
<AlertIcon className="w-5 h-5" />
<span>Tu sesión expira en 5 minutos</span>
</div>
</T>Con variables
// Combinación de texto estático con valores dinámicos
<T>
<p>¡Bienvenido de vuelta, <Var>{user.name}</Var>!</p>
</T>
// Formulario con contenido mixto
<T>
<label>
Correo electrónico: <input type="email" placeholder="Escribe tu correo electrónico" />
</label>
</T>Obtén más información sobre el componente <Var> en la Guía de componentes de Variable.
Configuración para producción
Proceso de compilación
Añade la traducción a tu pipeline de compilación:
{
"scripts": {
"build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
}
}Comportamiento en desarrollo vs producción
- Desarrollo: Con una clave de API de desarrollo, las traducciones se generan bajo demanda cuando se renderizan los componentes. Verás las traducciones en tiempo real mientras desarrollas.
- Producción: Todas las traducciones se generan previamente durante la fase de build y serán visibles cuando tu aplicación esté en producción.
Configura tu clave de API de desarrollo en tu entorno para habilitar la traducción en vivo durante el desarrollo. Puedes crear una en el dashboard en API Keys.
Consideraciones de privacidad
El contenido de los componentes <T> se envía a la API de GT para su traducción. Para datos sensibles, usa Componentes de Variable para mantener la información privada en local:
// Seguro: los datos sensibles permanecen en local
<T>
Bienvenido de nuevo, <Var>{username}</Var>
</T>Problemas frecuentes
Límites de los componentes
<T> solo traduce los children directos, no el contenido dentro de otros componentes:
// ❌ 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 dentro no se traducirá */}
</T>
// ✅ Correcto: envuelve cada componente por separado
function MyComponent() {
return <T><p>Esto se traducirá</p></T>;
}
<T><h1>Esto se traducirá</h1></T>
<MyComponent />Anidar componentes <T>
// ❌ No anides componentes <T>
<T>
<T>Hola, mundo</T> {/* No hagas esto */}
</T>Errores de contenido dinámico
La CLI producirá un error si hay contenido dinámico en <T>. Envuelve los valores dinámicos con componentes Variable:
// ❌ Incorrecto: el contenido dinámico se rompe
<T><p>Hola {username}</p></T>
// ✅ Correcto: usa componentes Variable
<T><p>Hola <Var>{username}</Var></p></T>Consulta la Guía de componentes con variables para manejar valores dinámicos y la Guía de componentes con ramificaciones para contenido condicional.
Próximos pasos
- Guía de componentes con variables - Maneja contenido dinámico en traducciones JSX
- Guía de componentes con ramificaciones - Añade lógica condicional a tus traducciones
¿Qué te parece esta guía?