javascript - 无法在具有某些自定义语言环境要求的 Next JS 静态页面项目中减小构建大小

Question

我正在使用 Contentful CMS 开发一个 Next JS 项目，该项目使用常见的反应组件构建多个博客。

在 Next JS 中，我的页面层次结构为：pages -> [domain] -> [locale] -> [slug.tsx]

基本上我有 3 个数组，1 个用于支持的语言列表（en、es、...）和 1 个包含自定义语言环境列表（es-es、es-mx、...）的数组，第三个是支持的国家/地区列表（我们，ca，es，mx ...）。

在构建项目时，我使用每个国家/地区的每种语言，以便将 url 设为 [lang]-[country] 对，例如：en-us。嗯，是的，这也是 SEO 要求。显然，我还检查了保存的自定义语言环境列表数组（es-es、es-mx），所以如果找到这对，我会用 es-es 而不是 es 来访问 CMS API，这样我就能得到正确的翻译。

我们正在构建静态页面，静态构建后我们博客的 URL 如下所示：

1. www.abc.com/en-us/blog1 -> english 
2. www.abc.com/en-ca/blog1 -> english 
3. www.abc.com/es-us/blog2 -> spanish
4. www.abc.com/es-es/blog3 -> spain spanish (custom locale)
5. www.abc.com/es-mx/blog4 -> mexican spanish  (custom locale)

我们从 CMS 获取翻译后的内容，并在 URL 中添加国家/地区以定位全球用户。

但是，我们有一个 SEO 要求，即他们希望为说西班牙语并居住在西班牙 (es-es) 的人与在美国说西班牙语的人 (es-us) 显示不同的内容。

这会导致下一个 JS 构建大而耗时。想象一下 10 种受支持的语言和 20 个受支持的国家/地区，因此我们将构建 300 个庞大的博客，考虑到我们只需要支持 3 个自定义语言环境这一事实。如果我们不这样做，我们可能只有 10 个基于每种语言的着陆器。

由于 Next JS 的静态函数的性质，我们需要构建这么多的着陆器：getStaticProps，它需要在构建时构建精确的 URL。

我正在寻找一些解决方案来减少这种情况，因为一旦我们开始创建更多的多语言博客，构建博客将非常复杂且耗时。

标签： javascriptreactjslocalizationnext.jscontentful