# General Translation Knowledge Base: General Translation 与 Intlayer：该选哪一个？
URL: https://generaltranslation.com/zh/kb/general-translation-vs-intlayer.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Intlayer 将每个组件的内容保存在组件旁的类型化声明文件中，所有语言并排编写，并可借助你配置的 AI 提供商补全缺失的语言。General Translation 则将文案以单一语言内联在组件中，并结合代码上下文生成其他语言的译文。
Category: 国际化
Last updated: 2026-10-16
Authors: Kevin Wu, Jackie Chen
Published: 2026-10-16

Intlayer 是一个[开源国际化库](https://github.com/aymericzip/intlayer)，它将内容放在每个组件旁的声明文件中 (例如 `inbox.content.ts`) ，每个字符串的所有译文都在一次 `t({ en, es, pl })` 调用中列出。`useIntlayer('inbox')` 这样的钩子会按当前区域设置返回这些内容，且带有类型。Intlayer 可借助你配置的 AI 提供商补全缺失的语言，还提供免费的可视化编辑器和可选的托管 CMS，但每个字符串的每种语言依然存放在你的源文件中，需要你自己编写、补全和审校。General Translation 则另辟蹊径：你只需用源语言内联编写一次文案，General Translation 便会结合代码上下文生成其他语言的译文。

## Video

The video is narrated in English, with English captions.

[General Translation vs. Intlayer: which should you use?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-general-translation-vs-intlayer.mp4) (42秒)

General Translation keeps copy inline in your components in one language and generates the other languages with the context of your code, while Intlayer keeps every language side by side in typed declaration files and fills gaps with an AI provider you configure. Write copy once inside a `<T>` component, run `npx gt translate` before the build, and review in the Dashboard while Locadex handles updates.

## Intlayer 的优势

* **内容紧邻组件。** 每个组件对应一个声明文件，让文本紧挨着渲染它的代码。
* **类型安全。** `useIntlayer` 的键带有类型：在 9.7.0 版本中，`useIntlayer('inbx')` 会触发 TypeScript 错误。如果某个 `t()` 调用缺少你配置的某个区域设置，同样会被标记出来 (在 9.7.0 的测试中表现为类型错误，检查的严格程度由 `strictMode` 控制) ，因此遗漏在发布前就能暴露出来。
* **丰富的内容类型。** 除了各区域设置的文本外，声明还支持[按 CLDR 类别划分的复数形式](https://intlayer.org/doc/concept/content/plural) (`plural({ one, few, many, other })`) 、枚举、条件、性别、Markdown、HTML、嵌套和插值。
* **自带模型。** `intlayer fill` 可借助 OpenAI、Anthropic、Mistral、Gemini、DeepSeek、Ollama、OpenRouter 等提供商翻译缺失的区域设置，可在 [`intlayer.config.ts` 的 `ai` 字段](https://intlayer.org/doc/concept/configuration)中配置，也可通过 `--provider` 和 `--api-key` 指定。使用自己的密钥并安装 `@intlayer/ai` 包后，[它会在本地运行](https://intlayer.org/doc/concept/cli/fill)，费用直接支付给提供商。
* **可视化编辑。** `intlayer-editor` 包会将正在运行的应用加载到编辑器中，供写作者直接选择和编辑文本，并将更改写回声明文件。[Intlayer 的文档指出](https://intlayer.org/doc/concept/editor)，该编辑器采用 Apache 2.0 许可，可免费用于商业用途，适用于开发和暂存环境。
* **广泛的框架支持。** [指南](https://intlayer.org/doc/get-started)涵盖 Next.js、React (搭配 Vite) 、React Router、TanStack Start、React Native、Vue 和 Nuxt、Svelte 和 SvelteKit、Solid、Preact、Astro、Angular，以及 Express、NestJS、Fastify 和 Hono 等服务端框架。

## Intlayer 留给你自己处理的事

下面是一个收件箱的内容文件，其中包含三个区域设置：

```ts title="inbox.content.ts"
import { t, plural, type Dictionary } from 'intlayer';

const inboxContent = {
  key: 'inbox',
  content: {
    title: t({
      en: 'Inbox',
      es: 'Bandeja de entrada',
      pl: 'Skrzynka odbiorcza',
    }),
    unread: t({
      en: plural({
        one: 'You have {{count}} unread message.',
        other: 'You have {{count}} unread messages.',
      }),
      es: plural({
        one: 'Tienes {{count}} mensaje sin leer.',
        other: 'Tienes {{count}} mensajes sin leer.',
      }),
      pl: plural({
        one: 'Masz {{count}} nieprzeczytaną wiadomość.',
        few: 'Masz {{count}} nieprzeczytane wiadomości.',
        many: 'Masz {{count}} nieprzeczytanych wiadomości.',
        other: 'Masz {{count}} nieprzeczytanej wiadomości.',
      }),
    }),
  },
} satisfies Dictionary;

export default inboxContent;
```

```tsx title="Inbox.tsx"
import { useIntlayer } from 'react-intlayer';

export function Inbox({ count }: { count: number }) {
  const { title, unread } = useIntlayer('inbox');
  return (
    <section>
      <h1>{title}</h1>
      <p>{unread({ count })}</p>
    </section>
  );
}
```

这样在每个区域设置下都能正确渲染，但每新增一个区域设置，文件就会随之膨胀：支持 20 个区域设置时，每个字符串都要带上 20 个条目。新增字符串时同样要把这些条目全部补齐。添加 `archive: t({ en: 'Archive' })` 后，会出现一个类型错误，列出仍缺失的区域设置：

```text title="Output"
Type '{ en: string; }' is missing the following properties from type
'Required<Record<keyof __RequiredLocalesRegistry, unknown>>': es, pl
```

在运行时，缺失的区域设置会回退到英语。要补上这些缺口，你得自己编写译文，或者运行 `intlayer fill`。Fill 会把字典的内容、[其描述](https://intlayer.org/doc/concept/content)以及配置中的 `applicationContext` 字符串发送给模型，但它看不到组件，也看不到字符串周围的 JSX。[Intlayer 的编译器](https://intlayer.org/doc/compiler)可以在构建时将纯 JSX 文本提取到内容文件中，省去手动编写声明的工作，但译文最终仍然存放在这些文件里。

## General Translation 在代码中只保留一种语言

General Translation 的库渲染译文的方式与此相同：为每个区域设置选取对应的消息，并应用其复数规则。区别在于，你的组件中只包含源语言。下面是用 `gt-react` 实现的同一个收件箱：

```tsx title="Inbox.tsx"
import { T, Plural, Num } from 'gt-react';

export function Inbox({ count }: { count: number }) {
  return (
    <T>
      <section>
        <h1>Inbox</h1>
        <Plural
          n={count}
          singular={<p>You have <Num>{count}</Num> unread message.</p>}
          plural={<p>You have <Num>{count}</Num> unread messages.</p>}
        />
      </section>
    </T>
  );
}
```

这里没有内容文件，也没有键。[`npx gt translate`](/docs/cli/reference/commands/translate) 会将每个 [`<T>`](/docs/react/reference/components/t) 块连同其元素结构发送到 General Translation API，并将各目标区域设置的译文分别写入独立文件，因此添加区域设置只需修改 `gt.config.json`，无需改动组件。你只需编写英语所需的复数形式，翻译时会自动生成各目标语言所需的形式，[`<Plural>`](/docs/react/reference/components/plural) 则会按照读者所在区域设置的规则选出对应的译文分支。[`npx gt validate`](/docs/cli/reference/commands/validate) 无需调用 API 即可检查项目，[`gt generate`](/docs/cli/reference/commands/generate) 则可为人工翻译的团队生成模板。

真正决定翻译结果的是上下文。General Translation 会将每个标记块内的文本与 JSX 结构一并翻译，并借助开发者备注明确含义。例如，用于保存文档的“Save”按钮在德语中译为“speichern”，而“省钱”优惠中的 save 则译为“sparen”。[上下文组](/docs/platform/dashboard/guides/defining-context-for-translations)会将你的词汇表和自定义提示词应用到所分配的项目中。审校人员可在仪表板中编辑译文，代码变更时则由 CLI 或 [Locadex](/docs/platform/locadex/quickstart) 负责更新。如果团队希望自动标记现有 JSX，可以开启[自动 JSX 注入](/docs/cli/guides/using-auto-jsx)。

这些 JavaScript 库采用 MIT 许可证，无需账户即可渲染已提供的译文。你可以将译文保留在构建产物中，也可以发布到 General Translation 的 CDN。

Cursor 在其网站和文档中借助 General Translation 支持 14 种以上的区域设置。 (参见[生产环境部署](https://generaltranslation.com/enterprise)。)

## Intlayer 与 General Translation 速览

| 功能        | Intlayer                                                                                      | General Translation                                                                                                    |
| --------- | --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| 文案编写方式    | 在每个组件对应的声明文件中使用 `t({ en, es, ... })`，并通过 `useIntlayer` 读取                                     | 在 [`<T>`](/docs/react/reference/components/t) 中编写 JSX，通过 [`useGT`](/docs/react/reference/hooks/use-gt) 处理字符串，或使用基于键的字典 |
| 译文存放位置    | 声明文件中，或按区域设置划分的内容文件中                                                                          | 按区域设置划分的独立文件，或 General Translation 的 CDN                                                                               |
| AI 翻译     | 使用你自己的提供商密钥运行 `intlayer fill`，或使用 Intlayer 的服务                                                | 通过 General Translation API 运行 [`npx gt translate`](/docs/cli/reference/commands/translate)                             |
| 模型可获得的上下文 | 字典内容、描述以及一个应用上下文字符串                                                                           | 已标记的 JSX 结构、开发者备注，以及已分配的词汇表和自定义提示词                                                                                     |
| 缺失的区域设置   | 会被标记，在 9.7.0 的测试中表现为类型错误；[`intlayer test`](https://intlayer.org/doc/concept/cli/test) 会报告这些缺失 | 由 [`npx gt translate`](/docs/cli/reference/commands/translate) 生成；未翻译的内容以源语言渲染                                         |
| 编辑        | 免费的本地可视化编辑器；可选的托管 CMS                                                                         | 在仪表板中编辑和审校译文                                                                                                           |
| 框架        | React、Next.js、Vue、Svelte、Solid、Angular、Astro、React Native 以及 Node.js 服务器                      | React、Next.js、Vue、Node.js 以及[其他 SDK](/docs/overview/get-started)                                                       |
| 许可证与费用    | Apache 2.0；托管 CMS 套餐按项目数、席位和存储空间计费 ([定价](https://app.intlayer.org/pricing)，查阅于 2026 年 10 月)   | JavaScript 库采用 MIT 许可；[翻译按用量计费](https://generaltranslation.com/pricing)                                                |

如果你希望每种语言都直接显示在组件旁边、缺失的区域设置以类型错误的形式提示、为文案作者提供页面内编辑器，或者需要 Svelte、Solid 或 Angular 集成，请选择 Intlayer。如果你更愿意只用源语言编写一次文案，再结合代码上下文、词汇表和自定义提示词自动生成其他所有语言，请选择 General Translation。

## 从 Intlayer 迁移到 General Translation

建议逐个组件迁移：在某个组件的 General Translation 版本就绪之前，继续使用它的 Intlayer 译文。在使用 `react-intlayer` 9.7.0 和 `gt-react` 11.4.12 的服务端渲染中，Intlayer 组件与 [`<T>`](/docs/react/reference/components/t) 组件可以在 `IntlayerProvider` 和 [`GTProvider`](/docs/react/reference/components/gt-provider) 下并排渲染。将该组件的 `en` 值以 JSX 形式复制到 [`<T>`](/docs/react/reference/components/t) 中，使用 [`npx gt translate`](/docs/cli/reference/commands/translate) 生成译文，并在切换组件前检查结果。可以从 [Next.js 快速入门](/docs/react/nextjs-quickstart)或 [React 快速入门](/docs/react/react-quickstart)开始；如需了解迁移期间如何同时运行两个库，请参阅[迁移国际化库](/docs/react/guides/migrating-i18n-libraries)。

## 要点总结

* Intlayer 将每个组件的内容保存在类型化声明文件中，各语言并列存放；缺失的区域设置会作为类型错误被捕获，并由你配置的 AI 提供商自动补全。
* General Translation 只在组件中保留源语言，其他语言则借助来自代码、词汇表和自定义提示词的上下文自动生成，并可在仪表板中审阅。
* Intlayer 支持的框架更多，还提供页面内可视化编辑；由于两个库可以同时渲染，你可以逐个组件迁移到 General Translation。

## Related questions

- [General Translation 与 i18next、react-intl 和 next-intl 对比：应该选择哪个国际化库？](https://generaltranslation.com/zh/kb/general-translation-vs-i18n-libraries.mdx): i18next、react-intl 和 next-intl 等开源库本身并不翻译任何内容。它们只负责显示你在各语言目录文件中提供的译文，这些译文由你、你的译者或其他服务编写。General Translation 的库同样开源，承担同样的工作，此外 General Translation 还会以你的代码为上下文完成翻译。
- [General Translation 与 Paraglide JS：该选哪一个？](https://generaltranslation.com/zh/kb/general-translation-vs-paraglide.mdx): 如果你希望将文案内联在代码中，并结合 React 组件结构、共享术语和仪表板审阅来生成译文，请选择 General Translation。如果你需要编译生成的带类型消息函数，以及按单条消息进行的 tree-shaking，请选择 Paraglide JS。Paraglide 负责渲染你的消息目录；General Translation 则将源文案与译文生成及后续更新衔接起来。
- [不使用翻译文件能实现 i18n 吗？](https://generaltranslation.com/zh/kb/i18n-without-translation-files.mdx): 可以。借助 General Translation 的 gt-react 和 gt-next 库，你可以为 React 和 Next.js 实现 i18n，既无需翻译键，也不用为每种语言维护 JSON 文件。文案以内联方式写在 JSX 的 `<T>` 组件中，gt translate 命令会在构建时结合代码中的上下文，为每种语言生成译文。Locadex 还能通过拉取请求让译文保持最新。
- [如何在 React 中处理复数形式？](https://generaltranslation.com/zh/kb/how-to-handle-plurals-in-react.mdx): 在 React 中处理复数形式时，应为每种语言的每个复数形式各准备一个句子，并按该语言的复数规则选出对应句子——英语有 2 种形式，俄语有 4 种，阿拉伯语有 6 种。gt-react 和 gt-next 提供的 General Translation `<Plural>` 组件只需接收你的源语言形式，General Translation 便会生成每种目标语言所需的形式。
- [General Translation 与 TMS（Crowdin、Lokalise、Phrase）对比](https://generaltranslation.com/zh/kb/general-translation-vs-tms.mdx): 如果开发者希望译文生成、源自代码的上下文以及审校流程都与产品发布紧密衔接，请选择 General Translation。你可以保留现有的消息目录和渲染库，也可以直接编写内联 JSX，无需翻译键。TMS 适合以语言供应商、CAT 编辑器和 XLIFF 交换为核心的翻译项目，其集成可以自动完成文件传输。

## Previous and next questions

- Previous question: [General Translation 与 i18next、react-intl 和 next-intl 对比：应该选择哪个国际化库？](https://generaltranslation.com/zh/kb/general-translation-vs-i18n-libraries.mdx)
- Next question: [General Translation 与 Lingui：该选哪一个？](https://generaltranslation.com/zh/kb/general-translation-vs-lingui.mdx)

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/zh/kb/sitemap.md) for every article.