# gt-next: General Translation Next.js SDK: Translating Strings
URL: https://generaltranslation.com/en-US/docs/next/tutorials/translating-strings.mdx
---
title: Translating Strings
description: How to translate strings
---

## Overview

This guide is a step-by-step tutorial on how to translate strings in your Next.js app using
[`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt), and [`tx`](/docs/next/api/strings/tx).

## Prerequisites

We assume that you already have installed `gt-next` in your project and have followed or are currently following the [Quickstart Guide](/docs/next).

## Translating strings

### Client side components
For any client-side strings, use [`useGT`](/docs/next/api/strings/use-gt).
Remember that `useGT` must be called within a child component of [`<GTProvider>`](/docs/next/api/components/gtprovider).

```jsx title="src/components/MyComponent.jsx" copy
import { useGT } from 'gt-next';

export default function MyComponent() {
  const gt = useGT(); // [!code highlight]
  return (
    <div>
      <h1>{gt('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}
```

### Server side components
For any server-side strings, use [`getGT`](/docs/next/api/strings/get-gt).

```jsx title="src/pages/index.jsx" copy
import { getGT } from 'gt-next/server';

export default async function Home() {
  const gt = await getGT(); // [!code highlight]
  return (
    <div>
      <h1>{gt('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}
```
<Callout>
  **Note:**
  When in development, if you are translating content at runtime, you will have to refresh the page to see the translated version of a string from [`getGT`](/docs/next/api/strings/get-gt).
  **This does not happen in production.**
</Callout>

### Adding variables
Variables are values that may change, but do not get translated.
To add variables to your strings, use the following pattern:

```jsx title="MyComponent.jsx" copy
import { useGT } from 'gt-next';

export default function MyComponent() {
  const gt = useGT();
  return (
    <div>
      <h1>{gt('Hello there, {username}', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
    </div>
  );
}
```

This works with both [`useGT`](/docs/next/api/strings/use-gt) and [`getGT`](/docs/next/api/strings/get-gt).

### Dynamic content
Say that you have a string that changes.
You can use the [`tx`](/docs/next/api/strings/tx) function to translate the string at runtime.

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

export default async function MyComponent({ username }) {
  const translation = await tx(`Hello, ${username}. How is your day?`); // [!code highlight]
  return (
    <div>
      <h1>{translation}</h1> // [!code highlight]
    </div>
  );
}
```

<Callout>
  **Note:**
  The [`tx`](/docs/next/api/strings/tx) function is only available on the server-side, and should only be used when necessary.
  Runtime translation often creates a delay.
  Use [`getGT`](/docs/next/api/strings/get-gt) or [`useGT`](/docs/next/api/strings/use-gt) whenever possible to translate before deployment.
</Callout>

---

## Notes
 * For translating strings, use [`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt), and [`tx`](/docs/next/api/strings/tx).
 * `useGT` and `getGT` translate before deployment, whereas `tx` translates at runtime. Use `tx` sparingly.
 * Variables can be added to strings using the `{ variables: { key: value } }` pattern.

## Next steps
 * Return to the [Quickstart Guide](/docs/next) to finish setting up your project for translation.
 * See the API reference for [`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt), and [`tx`](/docs/next/api/strings/tx).