快速入门
General Translation 的本地化库文档
快速上手
点击你的 React 框架开始：
npx gtx-cli@latest什么是 General Translation？
General Translation 是一整套国际化（i18n）技术栈，助你快速、轻松地交付多语言应用。
General Translation 包含：
- 面向 React 和 Next.js 的开源开发库
- AI 翻译服务
- 提供翻译内容的完整基础设施
如果你想将 GT 库与自己的翻译服务商配合使用，请参阅我们关于 gt-next 和 gt-react 的独立文档。
如果你想使用自己的 i18n 库，但仍希望使用 General Translation 的 AI 翻译服务，请参阅我们的 CLI 工具 文档。
如果你想使用 General Translation 来翻译你的 JSON、Markdown 或 MDX 文件，请参阅我们的 CLI 工具 文档。
npx gtx-cli@latest init运行我们的设置向导，开始上手吧！
功能特性
⚛️ 内联翻译整个 React 组件
- 只需一个成对的
<T>组件即可翻译整个 React 组件。- 无需复杂重构或凌乱的函数调用。
- 内容以内联方式就地维护，与代码同处一处。
- 无需任何键名、字符串或额外文件！
- 库会在幕后处理所有 i18n 逻辑，你无需操心。
- 翻译始终与源代码保持同步。
- 翻译携带与内容相关的上下文信息，因此更为准确。
export default function Page() {
return (
<T>
<p>您可以将任何 JSX 作为 {'<T>'} 组件的子内容编写。</p>
<p>
例如，您可以编写一个<a href='/'>链接</a>，并让文本根据上下文进行翻译。
translated in context.
</p>
<div>
<div>
<p>即使是深度嵌套的组件也会根据上下文进行翻译。</p>
<button>点击我！</button>
</div>
</div>
</T>
);
}🔎 与现有库的功能一致
- GT 库同样提供与现有库（如
i18next、react-intl和next-intl）相同的功能。 - 支持 dictionaries、复数、货币和自动路由等功能。
🧠 免费 AI 驱动的翻译服务
- 我们的免费 AI 驱动翻译服务可在数秒内为你的应用生成译文。
- 翻译热重载 会在你编写时自动实时更新译文。
- HTML 内容会根据不同语言进行重排与定制。
🔧 对开发者友好
- 上手简单，几分钟即可完成。
- 所有 GT 库均为开源且可独立使用。
- 你可以接入自有翻译提供方，或使用我们免费的 AI 翻译服务。
- 不再为管理诸如
t('menu.header.title')的翻译键耗费时间。- 直接在代码中内联书写即可！
查看我们的 GitHub 仓库以获取源代码和示例项目。
文档仍在建设中。如果在我们的 GitHub 仓库中找不到需要的内容，请提交一个 issue。
为什么选择 General Translation？
General Translation 提供完整的 i18n 技术栈，涵盖开发者库、AI 翻译，以及面向多语言应用的全套基础设施。
你可以将我们的库与自有翻译供应商灵活组合，或将我们免费的 AI 驱动翻译服务与现有的 i18n 库搭配使用。
若想获得真正无缝的端到端 i18n 体验，我们建议将我们的库与我们的翻译服务配套使用。
借助 gt-react 和 gt-next 等 GT 库，你可以：
1. 翻译整个 React 组件，而不只是字符串
作为 <T> 组件的 children 传入的 UI 都会被翻译，无论 JSX 树有多复杂。例如：
import { T } from 'gt-next';
export default function Page() {
return (
<T>
<p>
<b>{`<T>`} 组件</b>的所有子内容都会被翻译。
</p>
<p>
诸如<a href='/'>链接</a>
{', '}
<button>按钮</button>
{', '}
甚至{' '}
<div>
{' '}
<div>
{' '}
<div> 深层嵌套的组件 </div>{' '}
</div>{' '}
</div>{' '}
都会被翻译。
</p>
</T>
);
}2. 同时翻译客户端和服务器组件
借助对 Next.js App Router 和 React Server Components 的原生支持， 你可以同时翻译客户端组件与服务器组件。
import getName from '@/getName';
import { T, Var } from 'gt-next';
export default async function MyServerComponent() {
const name = await getName();
return (
<T>
你好,<Var>{name}</Var>
</T>
);
}'use client';
import { useState } from 'react';
import { T, Var } from 'gt-next';
export default function MyClientComponent() {
const [name, setName] = useState('Alice');
return (
<T>
你好，<Var>{name}</Var>
</T>
);
}3. 内联编写内容或放入 dictionaries
放在 <T> 组件内的 JSX 内容会被标记用于翻译：
import { T } from 'gt-next';
export default function Page() {
return (
<T>
<p>Hello, world!</p> {/* 翻译 <p>Hello, world!</p> */}
</T>
);
}或者，如果你更倾向于沿用历史上的“字典”方式，也可以将内容写在字典文件中：
{
"greeting": "Hello, world!"
}const dictionary = {
greeting: "Hello, world!"
}
export default dictionary;const dictionary = {
greeting: "Hello, world!"
}
export default dictionary;import { useTranslations } from "gt-next";
export default function Page() {
const t = useTranslations();
return t('greeting'); // 翻译为 "Hello, world!"
}4. 在开发环境中预览翻译内容
无需担心 UI 在不同语言下的呈现， General Translation 会在你编写内容时实时自动完成翻译。
不必在生产环境来回调整 UI， 只需用英文写一次内容，其余交给 General Translation。
想在部署前看看你的 UI 元素在德语中的效果？没问题，General Translation 会自动为你翻译！
5. 按需翻译内容
应用通常需要在运行时才知道的内容进行翻译。 在 Next.js 中，GT 库支持按需翻译。
常见示例包括：
- 用户特定信息
- 远程存储的内容
- 动态生成的内容
加载翻译后，它会实时以新的译文重写你的组件。
入门
按照快速上手指南，发布你的首批翻译。
npm i gt-nextyarn add gt-nextbun add gt-nextpnpm add gt-next按照快速上手指南，发布你的首批翻译。
npm i gt-reactyarn add gt-reactbun add gt-reactpnpm add gt-react准备走向全球了吗？几分钟内即可开始为你的应用添加翻译，触达全球用户！
这份指南怎么样？