# gt-next: General Translation Next.js SDK: useGT
URL: https://generaltranslation.com/en-GB/docs/next/api/strings/use-gt.mdx
---
title: useGT
description: API reference for the useGT string translation function
---

{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

The `useGT` function is a hook for translating strings at build time.

```jsx
const gt = useGT();

<p>{gt('This text will be translated')}</p>;
```

<Callout>
  **Build-time Translation:** `useGT` translations occur at build time, before
  your app is deployed. Although you can pass variables to the translated string, you
  can only translate content known at build time.
</Callout>


## Reference

### Parameters

None

### Returns

A callback function, `gt`, which translates the supplied content.

```jsx
(content: string, options?: InlineTranslationOptions) => string
```

| Name       | Type                                                                          | Description                                             |
| ---------- | ----------------------------------------------------------------------------- | ------------------------------------------------------- |
| `content`  | `string`                                                                      | The string content to be translated.                    |
| `options?` | [`InlineTranslationOptions`](/docs/next/api/types/inline-translation-options) | Translation options to customise the behaviour of `gt`. |

***


## Behaviour

### Production

During the CD process, any content inside a `gt` function will be translated before your application is deployed.
This ensures fast load times for all locales, but it can only translate content known at build time.

Once generated, translations are either (1) stored in the CDN or (2) stored in your app&#39;s build output, depending on your configuration.
From there, the translated content is served to your users.
If a translation is not found, it will fall back to the original content.

Make sure to follow the [deployment guide here](/docs/next/tutorials/quickdeploy).

### Development

During development, the `gt` function will translate content on demand.
This is useful for prototyping what your app will look like in different languages.
Remember to add a Dev API key to your environment to enable this behaviour.

You will see a delay during on-demand translation in development.
This will not happen in production builds unless content is explicitly being translated on demand.

***

## Example

### Basic usage

You can use `useGT` to translate strings.

```jsx copy
import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const gt = useGT();

  return <p>{gt('Hello, Alice!')}</p>;
}
```

Note: &quot;Alice&quot; will be translated to the user&#39;s preferred language.


### Using variables [#variables]

You can pass variables to dictionary translations.

```jsx copy
import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const gt = useGT();

  return <p>{gt('Hello, {name}!', { name: 'Alice' })}</p>;
}
```

Note: &quot;Alice&quot; will not be translated into the user&#39;s preferred language because it is a variable.


### Using ICU message format

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

```jsx copy
import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const gt = useGT();
  return (
    <p>
      {gt(
        'There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart',
        { count: 10 }
      )}
    </p>
  );
}
```

<Callout>
  ICU message format is a powerful way to format your variables. For more
  information, see the [ICU message format
  documentation](https://unicode-org.github.io/icu/userguide/format_parse/messages/).
</Callout>


### Importing from `gt-next`

When using the `"use client"` directive, you should import from `gt-next` rather than `gt-next`.

```jsx copy
'use client';
import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const gt = useGT();

  return <p>{gt('Hello, Alice!')}</p>;
}
```

***


## Notes

* The `useGT` function is a hook that translates strings.
* String translation with `useGT` happens before runtime, during the build process (unless in development).