# General Translation React SDKs (gt-react, gt-next): 概览
URL: https://generaltranslation.com/zh/docs/react/overview.mdx
---

title: 概览
description: 了解 General Translation 的 React 生态系统、其共享翻译模型的工作原理，以及你的框架应使用哪个快速入门。

---

General Translation 通过一套共享 API 为整个 React 生态系统提供国际化支持。无论你构建的是 React 单页应用、Next.js 应用、TanStack Start 应用，还是 React Native 应用，都可以使用相同的组件、钩子和配置。

这是 React 部分的入口页。继续阅读，了解这一生态系统并选择适合你的框架，然后按照对应的快速入门进行操作。

## React 生态系统 [#ecosystem]

每个框架都有各自的包，但它们都提供相同的翻译 API：

* `gt-react` — 用于服务器端渲染的 React 应用和单页应用 (SPA) ，例如 Vite 或 Create React App。参见 [React Quickstart](/docs/react/react-quickstart) 或 [React SPA Quickstart](/docs/react/react-spa-quickstart)。
* `gt-next` — 用于 Next.js App Router 和 Pages Router 应用。参见 [Next.js App Router Quickstart](/docs/react/nextjs-quickstart) 或 [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart)。
* `gt-tanstack-start` — 用于 TanStack Start 应用。参见 [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart)。
* `gt-react-native` — 用于 React Native 应用，包括 Expo 和原生 React Native CLI。参见 [React Native Quickstart](/docs/react/react-native-quickstart)。

*注意：* `gt-tanstack-start` *和* `gt-react-native` *仍处于实验阶段，暂不建议用于生产环境。*

## 共享翻译模型 [#shared-model]

由于所有包都构建在同一个核心之上，这套模型你只需要学一次，就能在各处复用。其组成部分包括：

* **[`<T>`](/docs/react/reference/components/t) 组件。** 用 `<T>` 包裹任意 JSX，即可对其进行原地翻译，包括嵌套元素和格式。`<T>` 会将其内容作为一个整体进行翻译。
* **[`useGT`](/docs/react/reference/hooks/use-gt) 钩子。** 使用它返回的函数来翻译独立字符串——占位符、`aria-label` 值、alt 文本等。调用方式为 `const gt = useGT();`，然后调用 `gt('Hello, world!')`。在异步 App Router 组件中，请使用来自 `gt-next/server` 的 [`getGT`](/docs/react/nextjs/reference/functions/get-gt)。
* **`GTProvider` 组件。** 包裹你的应用，让组件能够访问翻译内容和当前区域设置。向它传入翻译内容的方式会因框架而略有不同，这也是为什么每个框架都有各自的快速入门。
* `gt.config.json`**。** 位于项目根目录的单个 config file，用于声明 `defaultLocale`、目标 `locales`，以及 translation files 的写入位置。
* **`gt` CLI。** `gt` 包会生成并下载翻译。运行 `npx gt translate`，即可通过 General Translation API 翻译你的项目。

变量组件 ([`<Var>`](/docs/react/reference/components/var)、[`<Num>`](/docs/react/reference/components/num)、[`<Currency>`](/docs/react/reference/components/currency)、[`<DateTime>`](/docs/react/reference/components/datetime)) 、[`<Plural>`](/docs/react/reference/components/plural) 和 [`<Branch>`](/docs/react/reference/components/branch) 组件，以及区域设置钩子，也都是所有框架共享的。

## 选择你的框架 [#frameworks]

每种设置都使用相同的翻译组件和 CLI，但初始化方式和翻译交付方式有所不同。请先从适合你所用框架的快速入门指南入手：

* **构建服务器端渲染的 React 应用：**初始化 `gt-react`，在服务器上加载翻译，并水合 `GTProvider`。参见 [React 快速入门](/docs/react/react-quickstart)。
* **构建 React SPA (Vite、Create React App) ：**在渲染前于浏览器中初始化 `gt-react`。参见 [React SPA 快速入门](/docs/react/react-spa-quickstart)。
* **构建 Next.js App Router 应用：**添加 `withGTConfig` 插件，并在服务端组件和客户端组件中使用 `<T>`。参见 [Next.js App Router 快速入门](/docs/react/nextjs-quickstart)。
* **构建 Next.js Pages Router 应用：**通过页面属性加载区域设置和翻译。参见 [Next.js Pages Router 快速入门](/docs/react/nextjs-pages-router-quickstart)。
* **构建 TanStack Start 应用：**在 root 路由中初始化 General Translation，并通过加载器水合 `GTProvider`。参见 [TanStack Start 快速入门](/docs/react/tanstack-start-quickstart)。
* **构建 React Native 应用：**在你的入口文件中初始化，并添加用于 polyfill 的 Babel 插件。参见 [React Native 快速入门](/docs/react/react-native-quickstart)。

完成设置后，[指南](/docs/react/guides/configuring)涵盖了通用工作流——翻译 JSX 和字符串、格式化变量、处理复数、使用 dictionaries，以及管理 locales——而 [参考文档](/docs/react/reference/config) 则记录了每个组件、钩子、函数和配置选项。两者都适用于所有框架，框架间的差异会在选项卡中显示。