loadTranslations()

概述

使用 loadTranslations() 来指定翻译加载行为。默认情况下，你的应用会在生产环境中从 GT CDN 加载翻译内容。你可以指定一个 loadTranslations() 函数，从其他来源加载翻译，例如：

从你的应用包中（最常见）
从数据库
从 API
从其他 CDN

我们已集成支持从你应用包中的本地文件加载翻译。请按照本指南在你的 Next.js 应用中设置本地翻译。

如果你希望手动定义自己的翻译，请查看自定义翻译指南以及 loadDictionary() 函数。

参考

参数

Prop	Type	Default
`locale?`	`string`	-

描述

类型	描述
`locale`	需要加载翻译的语言环境。

返回值

一个 Promise<any>，解析为将 id 映射到指定语言环境翻译的字典。

设置

将你的 loadTranslations() 定义为名为 loadTranslations.js 或 loadTranslations.ts 文件的默认导出，文件位置可以在 src/ 目录下或根目录下。请确保该函数返回一个 promise，并解析为包含指定语言翻译内容的对象。

src/loadTranslations.js

export default async function loadTranslations(locale) {
  const translations = await import(`../public/locales/${locale}.json`);
  return translations.default;
};

如果你想使用不同的名称或路径，可以通过 withGTConfig() 中的 loadTranslationsPath 参数传递相对路径。

示例

从你的包中获取翻译

src/loadTranslations.js

export default async function loadTranslations(locale) {
  const translations = await import(`../public/locales/${locale}.json`);
  return translations.default;
};

当配置为使用本地翻译时，gtx-cli translate 命令将在你的项目文件树中保存翻译。

npx gtx-cli translate

从 CDN 加载翻译

loadTranslations.js

export default async function loadTranslations(locale) {
  try {
    const translations = await fetch(`https://your-cdn.com/translations/${locale}.json`);
    const data = await translations.json();
    return data;
  } catch (e) {
    console.error(e);
    return {};
  }
};

从你自己的数据库加载翻译

loadTranslations.js

export default async function loadTranslations(locale) {
  try {
    const translations = await prisma.translation.findUnique({
      where: {
        locale: locale,
      },
    });
    return translations;
  } catch (e) {
    console.error(e);
    return {};
  }
};

问题： loadTranslations() 和 loadDictionary() 之间有什么区别？

loadTranslations() 用于定义为你的应用获取翻译的自定义加载行为。这可能是从 CDN、数据库或你的应用包中获取翻译。这些通常是机器生成的翻译，由 cli 工具管理，并且不太适合用户编辑。
loadDictionary() 适用于将 gt-next 作为独立库的实现。用户带来自己的翻译，不使用翻译基础设施。

注意事项

loadTranslations() 让你能够自定义在生产环境中应用如何加载翻译内容。
最常见的用例是用于添加本地翻译

后续步骤

了解为什么你可能需要使用本地翻译
按照自定义翻译指南添加你自己的翻译

loadTranslations()

在本页面