如何将 AI 聊天机器人国际化

2025年2月26日

Brian Lou

指南ai聊天机器人国际化nextjsvercel

简介

前几天，我在 Vercel 上看到一个 Next.js AI 聊天机器人模板。让我惊讶的是，它居然只有英文版。

于是我把它做了国际化。只用了 5 分钟。 方法如下：

在这里查看效果。

在这里查看代码。

为什么要做国际化？

很多时候，开发者太专注于打造产品，反而忽略了用户。对于像 AI 聊天机器人这样天生就是多语言、并且面向所有人的应用来说，一个只支持英语的聊天机器人又有什么用呢？

世界上大多数人甚至不会说英语。事实上，只有大约 20% 的人会说。如果你正在做一家初创公司，而你的产品只有英文版本，那你岂不是错过了超过 80% 的潜在客户？

事实证明，大多数产品只提供英语版本是有原因的。因为 国际化很难。

现有的库，比如 next-intl 或 next-i18next，配置和使用起来都很折腾。不仅如此，它们甚至根本不负责翻译。你还是得雇译者、管理包含数百个键的字典，还要处理国际化中的各种其他痛点。哪怕只是文案上的一点小改动，翻译也可能要花上几小时，甚至几天。

但现在不一样了。

我一直在开发一个名为 gt-next 的新库，它能让你在几分钟内轻松完成应用国际化。它是一站式方案，能满足你所有国际化需求，包括翻译、路由等等。

我用 gt-next 在 5 分钟内完成了 Vercel AI 聊天机器人的国际化。

安装

我先 fork 了该仓库，然后将其克隆到本地：

git clone https://github.com/vercel/ai-chatbot.git

然后，我安装了依赖：

npm install

如果你也像我一样遇到依赖冲突，可以试试这个分支。

git clone -b base https://github.com/General-Translation/ai-chatbot.git

接着，我安装了 gt-next 和 gt 两个包。

npm install gt-next gt

配置

接着，我运行了 CLI 设置工具，并在每个问题中都选择了 "Yes"：

npx gt init

随后，我在 next.config.js 插件中添加了几个区域设置：

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // 法语、西班牙语、中文
})

我本来也可以添加更多区域设置，不过我只是想先用几种不同的语言测试一下这个聊天机器人。你想添加多少个区域设置都可以！

这里列出了 gt-next 支持的所有区域设置.

工作原理

该库的关键在于 <T> 组件。

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>You can write any JSX as children of the {'<T>'} component.</p>
      <p>
        For example, you could write a <a href="/">link</a>
        and have the text be translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T>
  )
}

凡是包裹在 <T> 组件中的内容，都可以翻译。 CLI 设置工具使用自定义的 babel 解析器扫描整个代码库，并自动用 <T> 包裹它找到的所有 React 组件。

与其他库相比，使用 <T> 组件有几个优势：

你再也不用处理字典或管理键名。
翻译始终保持最新，并与代码同步。
翻译会自动包含所有相关的上下文信息，从而提升翻译质量。

运行聊天机器人

当然，我也没忘记把所有环境变量都加上。

cp .env.example .env.local

为了获取 API 密钥，我需要先在 General Translation 仪表板上创建一个免费账户。整个过程只需点几下。

填好所有必需的环境变量后，我运行了聊天机器人：

npm run dev

就是这样！我把浏览器语言切换为法语后，界面也随之变成了法语。切换到西班牙语和中文时也是一样。

很简单，对吧？

我还在聊天机器人的页眉中添加了一个语言选择器，让语言切换更方便。

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... 现有代码 ... */}
    <LocaleSelector />
    {/* ... 现有代码 ... */}
  );
}

它可以直接使用。

收尾处理

尽管 CLI 设置工具已经很好地处理了所有 React 元素的翻译，但仍有几个棘手的字符串是硬编码的。

例如，model-selector.tsx 文件中就有一些聊天模型的硬编码描述：

{
  id: 'chat-model-large',
  name: 'Large model',
  description: 'Large model for complex, multi-step tasks',
},

我通过从 gt-next/client 导入 useGT Hook，并用它来翻译这些字符串，把这些地方整理了一下：

import { useGT } from 'gt-next/client';
const gt = useGT();
{
  id: 'chat-model-large',
  name: gt('Large model'),
  description: gt('Large model for complex, multi-step tasks'),
},

搞定了！聊天机器人中的所有文本现在都已完成国际化，并可支持任意语言。

部署到生产环境

部署到生产环境就更简单了。我将 GT_API_KEY 环境变量替换为生产环境 API 密钥，然后运行了 translate 命令：

npx gt translate --locales es fr zh

最后，我把这个聊天机器人部署到了 Vercel。

结论

这个聊天机器人实现国际化的过程非常轻松。我完全不用折腾任何配置文件、字典或复杂的路由设置。

短短几分钟内，我就做出了一个功能完整、支持国际化的 AI 聊天机器人，并且提供西班牙语、法语和中文版本。

如果你对代码感兴趣，可以在这里找到。

如果你想使用 General Translation，可以查看官网、GitHub 仓库或文档。

如何将 AI 聊天机器人国际化

2025年2月26日

Brian Lou

指南ai聊天机器人国际化nextjsvercel

简介

前几天，我在 Vercel 上看到一个 Next.js AI 聊天机器人模板。让我惊讶的是，它居然只有英文版。

于是我把它做了国际化。只用了 5 分钟。 方法如下：

在这里查看效果。

在这里查看代码。

为什么要做国际化？

事实证明，大多数产品只提供英语版本是有原因的。因为 国际化很难。

但现在不一样了。

我一直在开发一个名为 gt-next 的新库，它能让你在几分钟内轻松完成应用国际化。它是一站式方案，能满足你所有国际化需求，包括翻译、路由等等。

我用 gt-next 在 5 分钟内完成了 Vercel AI 聊天机器人的国际化。

安装

我先 fork 了该仓库，然后将其克隆到本地：

git clone https://github.com/vercel/ai-chatbot.git

然后，我安装了依赖：

npm install

如果你也像我一样遇到依赖冲突，可以试试这个分支。

git clone -b base https://github.com/General-Translation/ai-chatbot.git

接着，我安装了 gt-next 和 gt 两个包。

npm install gt-next gt

配置

接着，我运行了 CLI 设置工具，并在每个问题中都选择了 "Yes"：

npx gt init

随后，我在 next.config.js 插件中添加了几个区域设置：

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // 法语、西班牙语、中文
})

我本来也可以添加更多区域设置，不过我只是想先用几种不同的语言测试一下这个聊天机器人。你想添加多少个区域设置都可以！

这里列出了 gt-next 支持的所有区域设置.

工作原理

该库的关键在于 <T> 组件。

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>You can write any JSX as children of the {'<T>'} component.</p>
      <p>
        For example, you could write a <a href="/">link</a>
        and have the text be translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T>
  )
}

凡是包裹在 <T> 组件中的内容，都可以翻译。 CLI 设置工具使用自定义的 babel 解析器扫描整个代码库，并自动用 <T> 包裹它找到的所有 React 组件。

与其他库相比，使用 <T> 组件有几个优势：

你再也不用处理字典或管理键名。
翻译始终保持最新，并与代码同步。
翻译会自动包含所有相关的上下文信息，从而提升翻译质量。

运行聊天机器人

当然，我也没忘记把所有环境变量都加上。

cp .env.example .env.local

为了获取 API 密钥，我需要先在 General Translation 仪表板上创建一个免费账户。整个过程只需点几下。

填好所有必需的环境变量后，我运行了聊天机器人：

npm run dev

就是这样！我把浏览器语言切换为法语后，界面也随之变成了法语。切换到西班牙语和中文时也是一样。

很简单，对吧？

我还在聊天机器人的页眉中添加了一个语言选择器，让语言切换更方便。

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... 现有代码 ... */}
    <LocaleSelector />
    {/* ... 现有代码 ... */}
  );
}

它可以直接使用。

收尾处理

尽管 CLI 设置工具已经很好地处理了所有 React 元素的翻译，但仍有几个棘手的字符串是硬编码的。

例如，model-selector.tsx 文件中就有一些聊天模型的硬编码描述：

{
  id: 'chat-model-large',
  name: 'Large model',
  description: 'Large model for complex, multi-step tasks',
},

我通过从 gt-next/client 导入 useGT Hook，并用它来翻译这些字符串，把这些地方整理了一下：

import { useGT } from 'gt-next/client';
const gt = useGT();
{
  id: 'chat-model-large',
  name: gt('Large model'),
  description: gt('Large model for complex, multi-step tasks'),
},

搞定了！聊天机器人中的所有文本现在都已完成国际化，并可支持任意语言。

部署到生产环境

部署到生产环境就更简单了。我将 GT_API_KEY 环境变量替换为生产环境 API 密钥，然后运行了 translate 命令：

npx gt translate --locales es fr zh

最后，我把这个聊天机器人部署到了 Vercel。

结论

这个聊天机器人实现国际化的过程非常轻松。我完全不用折腾任何配置文件、字典或复杂的路由设置。

短短几分钟内，我就做出了一个功能完整、支持国际化的 AI 聊天机器人，并且提供西班牙语、法语和中文版本。

如果你对代码感兴趣，可以在这里找到。

如果你想使用 General Translation，可以查看官网、GitHub 仓库或文档。

如何将 AI 聊天机器人国际化

2025年2月26日

Brian Lou

指南ai聊天机器人国际化nextjsvercel

简介

前几天，我在 Vercel 上看到一个 Next.js AI 聊天机器人模板。让我惊讶的是，它居然只有英文版。

于是我把它做了国际化。只用了 5 分钟。 方法如下：

在这里查看效果。

在这里查看代码。

为什么要做国际化？

事实证明，大多数产品只提供英语版本是有原因的。因为 国际化很难。

但现在不一样了。

我一直在开发一个名为 gt-next 的新库，它能让你在几分钟内轻松完成应用国际化。它是一站式方案，能满足你所有国际化需求，包括翻译、路由等等。

我用 gt-next 在 5 分钟内完成了 Vercel AI 聊天机器人的国际化。

安装

我先 fork 了该仓库，然后将其克隆到本地：

git clone https://github.com/vercel/ai-chatbot.git

然后，我安装了依赖：

npm install

如果你也像我一样遇到依赖冲突，可以试试这个分支。

git clone -b base https://github.com/General-Translation/ai-chatbot.git

接着，我安装了 gt-next 和 gt 两个包。

npm install gt-next gt

配置

接着，我运行了 CLI 设置工具，并在每个问题中都选择了 "Yes"：

npx gt init

随后，我在 next.config.js 插件中添加了几个区域设置：

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // 法语、西班牙语、中文
})

我本来也可以添加更多区域设置，不过我只是想先用几种不同的语言测试一下这个聊天机器人。你想添加多少个区域设置都可以！

这里列出了 gt-next 支持的所有区域设置.

工作原理

该库的关键在于 <T> 组件。

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>You can write any JSX as children of the {'<T>'} component.</p>
      <p>
        For example, you could write a <a href="/">link</a>
        and have the text be translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T>
  )
}

凡是包裹在 <T> 组件中的内容，都可以翻译。 CLI 设置工具使用自定义的 babel 解析器扫描整个代码库，并自动用 <T> 包裹它找到的所有 React 组件。

与其他库相比，使用 <T> 组件有几个优势：

你再也不用处理字典或管理键名。
翻译始终保持最新，并与代码同步。
翻译会自动包含所有相关的上下文信息，从而提升翻译质量。

运行聊天机器人

当然，我也没忘记把所有环境变量都加上。

cp .env.example .env.local

为了获取 API 密钥，我需要先在 General Translation 仪表板上创建一个免费账户。整个过程只需点几下。

填好所有必需的环境变量后，我运行了聊天机器人：

npm run dev

就是这样！我把浏览器语言切换为法语后，界面也随之变成了法语。切换到西班牙语和中文时也是一样。

很简单，对吧？

我还在聊天机器人的页眉中添加了一个语言选择器，让语言切换更方便。

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... 现有代码 ... */}
    <LocaleSelector />
    {/* ... 现有代码 ... */}
  );
}

它可以直接使用。

收尾处理

尽管 CLI 设置工具已经很好地处理了所有 React 元素的翻译，但仍有几个棘手的字符串是硬编码的。

例如，model-selector.tsx 文件中就有一些聊天模型的硬编码描述：

{
  id: 'chat-model-large',
  name: 'Large model',
  description: 'Large model for complex, multi-step tasks',
},

我通过从 gt-next/client 导入 useGT Hook，并用它来翻译这些字符串，把这些地方整理了一下：

import { useGT } from 'gt-next/client';
const gt = useGT();
{
  id: 'chat-model-large',
  name: gt('Large model'),
  description: gt('Large model for complex, multi-step tasks'),
},

搞定了！聊天机器人中的所有文本现在都已完成国际化，并可支持任意语言。

部署到生产环境

部署到生产环境就更简单了。我将 GT_API_KEY 环境变量替换为生产环境 API 密钥，然后运行了 translate 命令：

npx gt translate --locales es fr zh

最后，我把这个聊天机器人部署到了 Vercel。

结论

这个聊天机器人实现国际化的过程非常轻松。我完全不用折腾任何配置文件、字典或复杂的路由设置。

短短几分钟内，我就做出了一个功能完整、支持国际化的 AI 聊天机器人，并且提供西班牙语、法语和中文版本。

如果你对代码感兴趣，可以在这里找到。

如果你想使用 General Translation，可以查看官网、GitHub 仓库或文档。

如何将 AI 聊天机器人国际化

2025年2月26日

Brian Lou

指南ai聊天机器人国际化nextjsvercel

简介

前几天，我在 Vercel 上看到一个 Next.js AI 聊天机器人模板。让我惊讶的是，它居然只有英文版。

于是我把它做了国际化。只用了 5 分钟。 方法如下：

在这里查看效果。

在这里查看代码。

为什么要做国际化？

事实证明，大多数产品只提供英语版本是有原因的。因为 国际化很难。

但现在不一样了。

我一直在开发一个名为 gt-next 的新库，它能让你在几分钟内轻松完成应用国际化。它是一站式方案，能满足你所有国际化需求，包括翻译、路由等等。

我用 gt-next 在 5 分钟内完成了 Vercel AI 聊天机器人的国际化。

安装

我先 fork 了该仓库，然后将其克隆到本地：

git clone https://github.com/vercel/ai-chatbot.git

然后，我安装了依赖：

npm install

如果你也像我一样遇到依赖冲突，可以试试这个分支。

git clone -b base https://github.com/General-Translation/ai-chatbot.git

接着，我安装了 gt-next 和 gt 两个包。

npm install gt-next gt

配置

接着，我运行了 CLI 设置工具，并在每个问题中都选择了 "Yes"：

npx gt init

随后，我在 next.config.js 插件中添加了几个区域设置：

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // 法语、西班牙语、中文
})

我本来也可以添加更多区域设置，不过我只是想先用几种不同的语言测试一下这个聊天机器人。你想添加多少个区域设置都可以！

这里列出了 gt-next 支持的所有区域设置.

工作原理

该库的关键在于 <T> 组件。

import { T } from 'gt-next'
export default function MyComponent() {
  return (
    <T>
      {' '}
      <p>You can write any JSX as children of the {'<T>'} component.</p>
      <p>
        For example, you could write a <a href="/">link</a>
        and have the text be translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T>
  )
}

凡是包裹在 <T> 组件中的内容，都可以翻译。 CLI 设置工具使用自定义的 babel 解析器扫描整个代码库，并自动用 <T> 包裹它找到的所有 React 组件。

与其他库相比，使用 <T> 组件有几个优势：

你再也不用处理字典或管理键名。
翻译始终保持最新，并与代码同步。
翻译会自动包含所有相关的上下文信息，从而提升翻译质量。

运行聊天机器人

当然，我也没忘记把所有环境变量都加上。

cp .env.example .env.local

为了获取 API 密钥，我需要先在 General Translation 仪表板上创建一个免费账户。整个过程只需点几下。

填好所有必需的环境变量后，我运行了聊天机器人：

npm run dev

就是这样！我把浏览器语言切换为法语后，界面也随之变成了法语。切换到西班牙语和中文时也是一样。

很简单，对吧？

我还在聊天机器人的页眉中添加了一个语言选择器，让语言切换更方便。

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... 现有代码 ... */}
    <LocaleSelector />
    {/* ... 现有代码 ... */}
  );
}

它可以直接使用。

收尾处理

尽管 CLI 设置工具已经很好地处理了所有 React 元素的翻译，但仍有几个棘手的字符串是硬编码的。

例如，model-selector.tsx 文件中就有一些聊天模型的硬编码描述：

{
  id: 'chat-model-large',
  name: 'Large model',
  description: 'Large model for complex, multi-step tasks',
},

我通过从 gt-next/client 导入 useGT Hook，并用它来翻译这些字符串，把这些地方整理了一下：

import { useGT } from 'gt-next/client';
const gt = useGT();
{
  id: 'chat-model-large',
  name: gt('Large model'),
  description: gt('Large model for complex, multi-step tasks'),
},

搞定了！聊天机器人中的所有文本现在都已完成国际化，并可支持任意语言。

部署到生产环境

部署到生产环境就更简单了。我将 GT_API_KEY 环境变量替换为生产环境 API 密钥，然后运行了 translate 命令：

npx gt translate --locales es fr zh

最后，我把这个聊天机器人部署到了 Vercel。

结论

这个聊天机器人实现国际化的过程非常轻松。我完全不用折腾任何配置文件、字典或复杂的路由设置。

短短几分钟内，我就做出了一个功能完整、支持国际化的 AI 聊天机器人，并且提供西班牙语、法语和中文版本。

如果你对代码感兴趣，可以在这里找到。

如果你想使用 General Translation，可以查看官网、GitHub 仓库或文档。

本页内容

本页内容

本页内容

本页内容