快速上手
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运行我们的设置向导即可开始！
功能特性
⚛️ 内联翻译整个 React 组件
- 只需使用一对
<T>组件的起始与结束标签，即可翻译整个 React 组件。- 无需复杂的重构或繁琐的函数调用。
- 内容以内联形式，位于与代码相同的位置。
- 无需 keys、strings 或额外的 files！
- 库会在幕后处理所有 i18n 逻辑，你无需操心。
- 翻译会始终与源代码保持同步。
- 翻译包含内容的上下文信息，因此更为准确。
export default function Page() {
return (
<T>
<p>你可以在 {'<T>'} 组件中将任意 JSX 作为 children 编写。</p>
<p>
例如，你可以写一个 <a href='/'>链接</a>，其中文本会按上下文进行翻译。
</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 翻译，以及面向多语言应用的全套基础设施。
你可以将我们的库与自有的翻译服务商自由组合，或在使用你自己的 i18n 库时，接入我们免费的 AI 驱动翻译服务。
如需获得无缝的端到端 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>的任意 children 都会被翻译。
</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>你好，世界！</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，世界！”
}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准备全球化？几分钟内为你的应用启用翻译，触达全球用户！
本指南如何?