如何从带有i18n的CMS加载i18next json？

Question

我使用的是https://github.com/i18next/next-i18next，而不是硬编码文件，我想使用HygraphCMS (以前的GraphCMS)来提供这些字符串。最好的方法是什么？

如果我等待一个异步请求，它会减慢速度。提前感谢！

Answer 1

这里的最佳解决方案将取决于如何设置Next.js项目的其余部分，以及您希望避免异步请求的程度。我在下面描述了两种方法。这两个示例都假设您正在Vercel上使用Next.js和主机，但在其他平台上，这应该是可能的，也是类似的。

1.构建本地存储脚本(没有异步请求)

首先编写一个脚本，获取所有的翻译并将它们存储在项目中(正如Aldabil21所说)。

在此之后，您可以在进行更改时创建部署网钩和从你的CMS呼叫它；这将确保翻译始终保持最新。这方面的一个问题可能是构建运行得太频繁，因此您可能需要在这里添加一些条件来防止这种情况，例如在翻译内容更改时只从CMS调用web钩子。

2.使用增量静态再生(带有异步请求)

当然，如果您使用的是增量静态再生，您可能会重新考虑使用getStaticProps获取翻译，因为并不是为每个访问者发出请求。

对CMS翻译集合的请求结果将缓存在Vercel的Edge网络上，然后在每个访问者之间共享，因此只有缓存过期后的第一个请求才会触发完整的请求。静态文件缓存的最大时间是31天，因此当请求新数据时，这种延迟可能不常见到可以接受的程度。请注意，必须在道具的返回对象中手动启用此getStaticProps。

您甚至可以进一步减轻这个请求(取决于您的项目设置)，方法是只查询当前使用的语言，并且只在访问者请求时(或者可能在页面空闲或打开语言切换器时)查询新的语言客户端。如果您有多种语言，这种减少将大大减少下载时间。

如果您确实选择了getStaticProps路由，并且正在使用Next.js >12.2.0，那么您还可以创建一个CMS Web钩子来在页面更新时调用按需重新验证端点，这将导致在用户有机会请求之前将新的翻译存储在缓存中，从而消除了所有用户的延迟。或者，您可以像在1中提到的那样使用web钩子，并在每次更新翻译集合时触发一个新的构建(带有新的翻译)。

Answer 2

我之前也讨论过类似的问题，我所做的就是创建了一个在dev和build命令之前运行的脚本，类似于：

// ...
"scripts": {
  // ....
  "trans": "node ./scripts/get-i18n.js",
  "dev":"npm run trans && next dev",
  "build":"npm run trans && next build"
}
// ...

然后编写一个脚本get-i18n.js，从CMS中获取翻译，并将它们保存在您在i18n设置中选择的目录中。

这种方法的缺点是，如果CMS中的转换发生变化，则每次都需要重新启动服务器，或者在另一个shell中手动运行脚本，以便获取和更新字符串。