# gt-next: General Translation Next.js SDK: RuntimeTranslationOptions
URL: https://generaltranslation.com/en-US/docs/next/api/types/runtime-translation-options.mdx
---
title: RuntimeTranslationOptions
description: API reference for the RuntimeTranslationOptions type
---

## Overview

The `RuntimeTranslationOptions` type is used to pass variables to inline translations and specify their render behavior.
You can also add a locale to specify a different language for the translation.
This is used with the [`tx`](/docs/next/api/strings/tx) function.

<Callout>
  **Runtime Translation:**
  To translate a variable on demand, include them directly in the string passed to [`tx`](/docs/next/api/strings/tx).
  Variables passed to `tx` via the `options` object are not translated.
</Callout>

## Reference

### Parameters

<TypeTable
  type={{
    "$locale?": {
        type: 'string',
        optional: true,
        default: 'undefined',
    },
    "variables?": {
        type: 'Record<string, any>',
        optional: true,
        default: 'undefined',
    },
  }}
/>

### Description

| Prop | Description |
| ---- | ----------- |
| `variables` | An object where the keys identify where each value is mapped to in the string.|
| `$locale` | Optionally include `$locale` as a variable in the `variables` object to specify a locale for the translation. Will default to browser's most preferred locale that is supported by your app. |
| `$maxChars` | Optionally include `$maxChars` as a variable to limit the character count of the translation. The library strictly enforces this limit using `formatCutoff()` logic. |


---

## Examples


### Passing variables
In order to add a variable to the string, we use the `{variable-name}` syntax, where curly braces wrap the name of the variable.

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

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


### Using ICU message format

`gt-next` supports ICU message format, which allows you to also format your 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>;
};
```


### Translating variables
In order to translate a variable, include it directly in the string passed to `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>;
};
```

Note that the variable `hairColor` gets translated, but `username` does not.


### Specifying a locale
You can specify a locale to use for the translation.
```jsx title="Component.tsx"
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Hello, world!', { $locale: 'fr' })}</div>;
};
```
This will always be translated to french.


### Character limits

Use `$maxChars` to limit translation length:

```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…"
};
```

---

## Notes
 * `RuntimeTranslationOptions` is used for string translations at runtime.
 * The `variables` object passes values to the text.
 * The `variablesOptions` object defines the behavior of the variables.


## Next steps
 * See [`tx`](/docs/next/api/strings/tx) for more information on inline string translations.
 * See [`ICU message format`](https://unicode-org.github.io/icu/userguide/format_parse/messages/) for more information on formatting options.