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

## Overview

The `DictionaryTranslationOptions` type is used to pass variables to dictionary entries and specify how they are rendered.
It is used with [`useTranslations`](/docs/next/api/dictionary/use-translations) and [`getTranslations`](/docs/next/api/dictionary/get-translations) to pass variables to dictionary entries.

<Callout>
  **Build-time Translation:**
  Variables are not translated with [`useTranslations`](/docs/next/api/dictionary/use-translations) and [`getTranslations`](/docs/next/api/dictionary/get-translations), only the original string.
  See [`tx`](/docs/next/api/strings/tx) for translating strings with dynamic content.
</Callout>

## Reference

### Parameters

<TypeTable
  type={{
  "[variable]?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Description

| Prop         | Description                                                                                                                                         |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `[variable]` | Variables are passed as top-level keys in the options object. The key names correspond to placeholders in the dictionary entry (e.g. `{username}`). |

***

## Examples

### Passing variables

To pass a variable to a dictionary entry, we need to do two things: (1) add a variable to the entry and (2) reference that variable in the [`d`](/docs/next/api/strings/use-gt) invocation.

First, add a variable to the dictionary entry using the following syntax: `{username}`.
`username` is the name of the variable.

```jsx title="dictionary.ts"
// [!code word:username]
const dictionary = {
  greeting: {
    hello: 'Hello, {username}!',
  },
};

export default dictionary;
```

Next, we reference the variable:

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

const Component = () => {
  const t = useTranslations();
  return <div>{t('greeting.hello', { username : 'Brian123' })}</div>;
};
```


### Using ICU message format

`gt-next` supports ICU message format, which also lets you format your variables.

```jsx title="dictionary.ts"
// [!code word:account-balance]
const dictionary = {
  account: {
    balance: 'Your account balance: {dollars, number, ::currency/USD}!',
  },
};

export default dictionary;
```

Next, we reference the variable:

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

const Component = () => {
  const t = useTranslations();
  return <div>
    { t(
      'account.balance',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};
```

***


## Notes

* Variables are passed as top-level keys in the options object, not nested under a `variables` key.

### Next steps

* See [dictionaries](/docs/next/guides/dictionaries) for more information on dictionaries and common practices.
* See [`useTranslations`](/docs/next/api/dictionary/use-translations) or [`getTranslations`](/docs/next/api/dictionary/get-translations) for more information on the dictionary interface.
* See [`ICU message format`](https://unicode-org.github.io/icu/userguide/format_parse/messages/) for more information on formatting options.