# gt-next: General Translation Next.js SDK: Componentes de variable
URL: https://generaltranslation.com/es/docs/next/guides/variables.mdx
---
title: Componentes de variable
description: Cómo usar componentes de variable para contenido dinámico en las traducciones
---

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

Los componentes de variable te permiten incluir de forma segura contenido dinámico dentro de los componentes [`<T>`](/docs/next/api/components/t). Se encargan del formato y la localización localmente, sin enviar datos a la API de traducción, por lo que son ideales para información sensible como nombres de usuario, números de cuenta y datos financieros.


## Componentes disponibles

* [`<Var>`](/docs/next/api/components/var): Contenido dinámico sin formato
* [`<Num>`](/docs/next/api/components/num): Números con formato según la configuración regional
* [`<Currency>`](/docs/next/api/components/currency): Valores monetarios con símbolos y formato
* [`<DateTime>`](/docs/next/api/components/datetime): Fechas y horas según las convenciones de la configuración regional

## Inicio rápido

Los componentes de variable se usan dentro de [`<T>`](/docs/next/api/components/t) para gestionar contenido dinámico:

```jsx
import { T, Var, Num, Currency, DateTime } from 'gt-next';

function UserProfile({ user }) {
  return (
    <T>
      <p>Welcome back, <Var>{user.name}</Var>!</p>
      <p>You have <Num>{user.itemCount}</Num> items.</p>
      <p>Balance: <Currency currency="USD">{user.balance}</Currency></p>
      <p>Last login: <DateTime>{user.lastLogin}</DateTime></p>
    </T>
  );
}
```


## Cómo funcionan los componentes de variable

Los componentes de variable resuelven el problema del contenido dinámico de la siguiente forma:

1. **Envuelven valores dinámicos** para poder usarlos dentro de [`<T>`](/docs/next/api/components/t)
2. **Gestionan el formato localmente** con las API de i18n integradas del navegador
3. **Mantienen la privacidad de los datos**: el contenido nunca se envía a la API de traducción
4. **Proporcionan localización** según la configuración regional actual del usuario

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

// ✅ Esto funciona - contenido dinámico envuelto
<T><p>Hello <Var>{username}</Var></p></T>
```


## Guía de componentes

### Var - Contenido dinámico sin formato

Usa [`<Var>`](/docs/next/api/components/var) para cualquier contenido dinámico que no requiera un formato especial:

```jsx
// Información del usuario
<T>
  <p>Hello, <Var>{user.name}</Var>!</p>
  <p>Your account ID is <Var>{user.accountId}</Var></p>
</T>

// Renderizado condicional
<T>
  Dashboard: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T>
```


### Num - Números con formato

Usa [`<Num>`](/docs/next/api/components/num) para números que deban seguir las reglas de formato de la configuración regional:

```jsx
// Formato numérico básico
<T>
  You have <Num>{itemCount}</Num> items in your cart.
</T>

// Uso autónomo (equivalente a number.toLocaleString())
<Badge><Num>{totalItems}</Num></Badge>

// Opciones de formato personalizadas
<T>
  Distance: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T>
```


### Currency - Valores de dinero

Usa [`<Currency>`](/docs/next/api/components/currency) para importes monetarios:

```jsx
// Formato de moneda básico (por defecto "USD")
<T>
  Your total is <Currency>{total}</Currency>.
</T>

// Diferentes monedas
<T>
  Price: <Currency currency="EUR">{price}</Currency>
</T>

// Formato personalizado
<Currency 
  currency="USD" 
  options={{ minimumFractionDigits: 0 }}
>
  {roundedAmount}
</Currency>
```


### DateTime - Fechas y horas

Usa [`<DateTime>`](/docs/next/api/components/datetime) para las fechas y horas:

```jsx
// Formato de fecha básico
<T>
  Order placed on <DateTime>{orderDate}</DateTime>
</T>

// Formato de hora
<T>
  Last updated: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>

// Formato de fecha personalizado
<DateTime options={{ 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}}>
  {eventDate}
</DateTime>
```


## Privacidad y seguridad

### Los datos permanecen en local

Los componentes de variable se encargan de todo el formateo localmente mediante las [API de Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) del navegador. **No se envía contenido dinámico a la API de traducción**, por lo que son perfectos para:

* Nombres e información personal
* Números de cuenta e identificadores
* Datos financieros y saldos
* Marcas temporales y fechas privadas

```jsx
// Seguro - los datos sensibles permanecen en local
<T>
  Account balance: <Currency currency="USD">{balance}</Currency>
  Last login: <DateTime>{lastLoginTime}</DateTime>
</T>
```


### Excepción importante

Ten cuidado con los componentes [`<T>`](/docs/next/api/components/t) anidados dentro de los componentes de variable:

```jsx
// ⚠️ El contenido interno de <T> SÍ será enviado para traducción
<T>
  <Var>
    <T>Hello, world!</T>  {/* Esto se traduce */}
    {privateData}         {/* Esto permanece local */}
  </Var>
</T>
```


## Uso autónomo

Los componentes de variable se pueden usar fuera de [`<T>`](/docs/next/api/components/t) para formatear:

```jsx
// Funcionan como sus respectivos métodos .toLocale*()
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // formato de precio
<span><DateTime>{date}</DateTime></span>           // date.toLocaleDateString()
```


## Problemas comunes

### Ignorar las opciones de localización

Para [`<Currency>`](/docs/next/api/components/currency), asegúrate de pasar la prop `currency` para especificar el tipo de moneda. Esto garantiza que se utilicen el símbolo de moneda y el formato correctos al mostrar el valor:

```jsx
// ❌ Usa USD por defecto - puede que no sea lo que los usuarios esperan
<T>
  The item costs <Currency>{price}</Currency>
</T>

// ✅ Especifica la moneda de forma explícita
<T>
  The item costs <Currency currency="EUR">{price}</Currency>
</T>
```

Otros componentes también tienen props opcionales que te permiten personalizar el formato:

```jsx
// Formato básico
<T>
  <Num>{count}</Num> artículos en stock
</T>

// Formato personalizado
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> tasa de finalización
</T>

// Formato de fecha
<T>
  Última actualización: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>
```


## Próximos pasos

* [Guía de componentes con bifurcación](/docs/next/guides/branches) - Agrega lógica condicional a tus traducciones
* [Guía de traducción de cadenas](/docs/next/guides/strings) - Traduce texto plano sin JSX
* Referencias de la API:
  * [Componente `<Var>`](/docs/next/api/components/var)
  * [Componente `<Num>`](/docs/next/api/components/num)
  * [Componente `<Currency>`](/docs/next/api/components/currency)