# gt-next: General Translation Next.js SDK: RuntimeTranslationOptions
URL: https://generaltranslation.com/es/docs/next/api/types/runtime-translation-options.mdx
---
title: RuntimeTranslationOptions
description: Referencia de la API para el tipo RuntimeTranslationOptions
---

## Descripción general

El tipo `RuntimeTranslationOptions` se usa para pasar variables a traducciones inline y especificar su comportamiento de renderizado.
También puedes agregar una configuración regional para indicar un idioma distinto para la traducción.
Esto se usa con la función [`tx`](/docs/next/api/strings/tx).

<Callout>
  **Traducción en runtime:**
  Para traducir una variable cuando sea necesario, inclúyela directamente en la cadena que se pasa a [`tx`](/docs/next/api/strings/tx).
  Las variables que se pasan a `tx` mediante el objeto `options` no se traducen.
</Callout>

## Referencia

### Parámetros

<TypeTable
  type={{
  "[variable]?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "$locale?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$maxChars?": {
      type: 'number',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descripción

| Prop         | Descripción                                                                                                                                                                                  |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `[variable]` | Las variables se pasan como claves de nivel superior en el objeto de opciones. Los nombres de las claves corresponden a los marcadores de posición de la cadena (por ejemplo, `{username}`). |
| `$locale`    | Especifica una configuración regional para la traducción. De forma predeterminada, se usará la configuración regional preferida del navegador que sea compatible con tu aplicación.          |
| `$maxChars`  | Limita la cantidad de caracteres de la traducción. La biblioteca aplica estrictamente este límite.                                                                                           |

***

## Ejemplos

### Pasar variables

Para añadir una variable a la cadena, usamos la sintaxis `{variable-name}`, donde el nombre de la variable va entre llaves.

```jsx title="Component.tsx"
// [!code word:username]
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    {tx(`Hello, {username}!`,{ username: 'Brian123' })}
  </div>;
};
```


### Uso del formato de mensajes ICU

`gt-next` admite el formato de mensajes ICU, que también te permite formatear las variables.

```jsx title="Component.tsx"
// [!code word:account-balance]
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    { tx(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};
```


### Traducir variables

Para traducir una variable, inclúyela directamente en la cadena que pasas a `tx`.

```jsx title="Component.tsx"
import { tx } from 'gt-next/server';

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `Hello, {username}! Your haircolor is ${hairColor}`,
    { username: 'Brian123' }
  )}</div>;
};
```

Ten en cuenta que la variable `hairColor` se traduce, pero `username` no.


### Especificar una configuración regional

Puedes especificar qué configuración regional usar para la traducción.

```jsx title="Component.tsx"
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Hello, world!', { $locale: 'fr' })}</div>;
};
```

Esto se traducirá siempre al francés.

### Límites de caracteres

Usa `$maxChars` para limitar la longitud de la traducción:

```jsx title="Component.tsx"
// [!code word:$maxChars]
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Welcome to our application', { $maxChars: 15 })}</div>;
  // Output: "Bienvenue à no\u202F…"
};
```

***


## Notas

* `RuntimeTranslationOptions` se usa para traducciones de cadenas en runtime.
* Las variables se pasan como claves de nivel superior en el objeto de opciones, no anidadas bajo una clave `variables`.

## Próximos pasos

* Consulta [`tx`](/docs/next/api/strings/tx) para ver más información sobre las traducciones inline de cadenas.
* Consulta [`formato de mensajes ICU`](https://unicode-org.github.io/icu/userguide/format_parse/messages/) para ver más información sobre las opciones de formato.