# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Tx>`
URL: https://generaltranslation.com/zh/docs/react/nextjs/reference/components/tx.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 在 Next.js App Router 的服务器组件中翻译请求时的 JSX。`<Tx>` 组件的 API 参考。

`<Tx>` 组件通过 General Translation API 在请求时翻译 JSX。适用于构建时无法确定的 dynamic content；静态源内容请使用 [`<T>`](/docs/react/reference/components/t)。

`<Tx>` 仅可用于服务器端，不适用于 Pages Router。

## 概览 [#overview]

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

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

## 属性 [#props]

| 属性           | 描述                        | 类型          | 可选 | 默认值       |
| ------------ | ------------------------- | ----------- | -- | --------- |
| `children`   | 要翻译的 JSX 内容。              | `ReactNode` | 否  | —         |
| `context`    | 用于指导翻译的上下文。               | `string`    | 是  | —         |
| `maxChars`   | 向翻译服务请求的正整数最大值；不会截断返回的内容。 | `number`    | 是  | —         |
| `locale`     | 目标区域设置覆盖。                 | `string`    | 是  | 当前请求的区域设置 |
| `[variable]` | 插入到翻译后内容中的命名变量。           | `ReactNode` | 是  | —         |

## 返回值 [#returns]

**类型** `Promise<ReactNode>`

## 示例 [#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.