# gt-next: General Translation Next.js SDK: componentes Variable
URL: https://generaltranslation.com/es/docs/next/guides/variables.mdx
---
title: componentes Variable
description: Cómo usar componentes 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 Variable te permiten incluir de forma segura contenido dinámico dentro de los componentes [`<T>`](/docs/next/api/components/t). Se encargan de manejar el formato y la localización de forma local 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 específico de 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 con las convenciones de la configuración regional

## Inicio rápido

Los componentes Variable se usan dentro de [`<T>`](/docs/next/api/components/t) para manejar 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 Variable

Los componentes Variable resuelven el problema del contenido dinámico de la siguiente manera:

1. **Encapsulan valores dinámicos** para que puedan usarse dentro de [`<T>`](/docs/next/api/components/t)
2. **Manejan el formato de forma local** mediante 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. **Aplican la 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 los números que deban seguir las reglas de formato de la configuración regional:

```jsx
// Formato de número básico
<T>
  You have <Num>{itemCount}</Num> items in your cart.
</T>

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

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


### Currency - Importes monetarios

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>

// Monedas diferentes
<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 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>
```


## Política de privacidad y seguridad

### Los datos se mantienen locales

Los componentes Variable manejan todo el formato de forma local con las [API de Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) del navegador. **No se envía ningún contenido dinámico a la API de traducción**, lo que los hace ideal para:

* Nombres de usuario e información personal
* Números de cuenta e ID
* Datos financieros y saldos
* Marcas de tiempo y fechas privadas

```jsx
// Seguro - los datos sensibles se mantienen locales
<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 Variable:

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


## Uso independiente

Los componentes Variable pueden usarse fuera de [`<T>`](/docs/next/api/components/t) únicamente para dar formato:

```jsx
// Funcionan como sus respectivos métodos .toLocale*()
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // formato del 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 propiedades opcionales que te permiten personalizar el formato:

```jsx
// Formato básico
<T>
  <Num>{count}</Num> items in stock
</T>

// Formato personalizado
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> completion rate
</T>

// Formato de fecha
<T>
  Last updated: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>
```


## Próximos pasos

* [Guía de componentes de 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 sin formato 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)