# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Tx>`
URL: https://generaltranslation.com/en-GB/docs/react/nextjs/reference/components/tx.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Translate request-time JSX in Next.js App Router server components. API reference for the `<Tx>` component.

The `<Tx>` component translates JSX at request time through the General Translation API. Use it for dynamic content that is not known at build time; use [`<T>`](/docs/react/reference/components/t) for static source content.

`<Tx>` is server-only and does not work with the Pages Router.

## Overview [#overview]

```tsx
import { Tx } from 'gt-next/server';

<Tx context="Greeting loaded at request time">Welcome back</Tx>;
```

## Props [#props]

| Prop         | Description                                                                                                 | Type        | Optional | Default                |
| ------------ | ----------------------------------------------------------------------------------------------------------- | ----------- | -------- | ---------------------- |
| `children`   | JSX content to translate.                                                                                   | `ReactNode` | No       | —                      |
| `context`    | Context that guides the translation.                                                                        | `string`    | Yes      | —                      |
| `maxChars`   | Positive-integer maximum requested from the translation service; it does not truncate the returned content. | `number`    | Yes      | —                      |
| `locale`     | Target locale override.                                                                                     | `string`    | Yes      | Current request locale |
| `[variable]` | Named variable inserted into the translated content.                                                        | `ReactNode` | Yes      | —                      |

## Returns [#returns]

**Type** `Promise<ReactNode>`

## Example [#example]

```tsx title="app/profile/page.tsx"
import { Tx } from 'gt-next/server';

export default async function ProfilePage() {
  return <Tx context="Account page heading">Welcome back</Tx>;
}
```

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.