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，该 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 --no-publish --translations-dir ./public/locales

从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()

在本页面