# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Tx>`
URL: https://generaltranslation.com/en-US/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.