本地翻译

概述

本指南将向您展示如何在您的 Next.js 应用中存储翻译，而不是使用 CDN。这意味着翻译将存在于您的应用程序包中。这可以导致更快的加载时间，并避免对外部基础设施的依赖。

在本文档中，我们将 (1) 解释什么是本地翻译及其工作原理，以及 (2) 向您展示如何为您的 Next.js 应用设置本地翻译。

本地翻译存储在您的应用程序包中，而不是从 CDN（内容分发网络）中获取。

假设您已将 gtx-cli translate 命令添加到您的 CD 过程中。这将生成包含您应用程序翻译的 JSON 文件。最后一步是将这些翻译从我们的 API 中提取到您的应用中。

有两种方法可以做到这一点：

更快的加载时间： 本地翻译直接从您的应用程序提供，这意味着它们将比从 CDN 提供的翻译加载更快。

不依赖外部服务： 您的应用加载翻译的能力不依赖于 CDN 的可用性。

增加的包大小： 本地翻译将增加您的应用程序包的大小，因为它们将与您的应用程序一起提供。这意味着您的应用程序在首次加载时可能会稍微长一些。

语言环境管理： 为了添加或删除对语言环境的支持，您每次都需要重新部署您的应用程序。

内容管理： 就像语言环境管理一样，如果您想更改翻译（即，您不喜欢您的内容在不同语言中的措辞），您必须使用新的翻译重新部署您的应用程序。

确保您已遵循快速入门指南。

在 ./src 下添加一个 loadTranslations.js 文件，内容如下：

src/loadTranslations.js

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

运行以下命令，当被问到“您的语言文件存储在哪里？”时，选择“本地”选项。

npx gtx-cli init

然后，运行翻译命令。

npx gtx-cli translate

就是这样！您的应用现在将仅从本地文件加载翻译。