El componente <T>
Cómo internacionalizar componentes JSX usando el componente <T>
El componente <T> 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.
Guía rápida
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 el contenido dinámico dentro de <T>, usa Componentes de Variable y Componentes de Ramificación.
Uso básico
El componente <T> acepta cualquier contenido JSX como children:
// Texto simple
<T>Bienvenido a nuestra aplicación</T>
// Elementos HTML
<T><h1>Título de la página</h1></T>
// JSX anidado complejo
<T>
<div className="alert">
<span>Importante:</span> Por favor lee cuidadosamente.
</div>
</T>Opciones de configuración
Agregar contexto
Proporcione contexto de traducción para términos ambiguos:
<T context="notification popup, not bread">
Haz clic en la notificación para cerrarla
</T>Configuración de IDs de traducción
Usa IDs explícitos para mantener traducciones consistentes:
<T id="welcome-message">
¡Bienvenido de nuevo, usuario!
</T>Cuándo usar <T>
Utiliza <T> únicamente 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 Componentes Variable y Componentes Branching para más detalles.
Ejemplos
Elementos simples
// Texto básico
<T>¡Hola, mundo!</T>
// Botón con texto
<T><Button>Enviar formulario</Button></T>
// Encabezado con estilos
<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 nosotros</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
// Combinando texto estático con valores dinámicos
<T>
<p>Bienvenido de nuevo, <Var>{user.name}</Var>!</p>
</T>
// Formulario con contenido mixto
<T>
<label>
Correo electrónico: <input type="email" placeholder="Ingresa tu correo electrónico" />
</label>
</T>Obtén más información sobre el [componente <Var> en la Guía de componentes Variable.
Configuración de producción
Proceso de compilación
Agrega la traducción a tu flujo de compilación:
{
"scripts": {
"build": "npx gtx-cli translate && <...TU_COMANDO_DE_BUILD...>"
}
}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 traducciones en tiempo real mientras desarrollas.
- Producción: Todas las traducciones se precompilan durante la fase de build y serán visibles una vez que 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 panel de control, 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 Variable para mantener la información privada en local:
// Seguro - los datos sensibles permanecen locales
<T>
Bienvenido de vuelta, <Var>{username}</Var>
</T>Problemas frecuentes
Límites de los componentes
<T> solo traduce los elementos hijos directos, no el contenido dentro de otros componentes:
// ❌ Incorrecto - el contenido dentro de componentes no será traducido
function MyComponent() {
return <p>Esto no será traducido</p>;
}
<T>
<h1>Esto será traducido</h1>
<MyComponent /> {/* El contenido interno no será traducido */}
</T>
// ✅ Correcto - envuelve cada componente individualmente
function MyComponent() {
return <T><p>Esto será traducido</p></T>;
}
<T><h1>Esto será traducido</h1></T>
<MyComponent />Anidación de componentes <T>
// ❌ No anides componentes <T>
<T>
<T>Hola mundo</T> {/* No hagas esto */}
</T>Errores en contenido dinámico
La CLI mostrará un error si hay contenido dinámico dentro de <T>. Envuelve los valores dinámicos con componentes Variable:
// ❌ Incorrecto - el contenido dinámico falla
<T><p>Hola {username}</p></T>
// ✅ Correcto - usa componentes Variable
<T><p>Hola <Var>{username}</Var></p></T>Consulta la guía de componentes Variable para manejar valores dinámicos y la guía de componentes de bifurcación para contenido condicional.
Próximos pasos
- Guía de componentes Variable - Gestiona contenido dinámico dentro de traducciones en JSX
- Guía de componentes de bifurcación - Añade lógica condicional a tus traducciones
¿Qué te ha parecido esta guía?