Question

问题

Next js SSR 环境无法检测某些语言的区域设置，例如“gr”和“rs”或“es”。我正在使用 react-intl https://github.com/formatjs/formatjs

这导致我的浏览器在页面加载时显示此错误。

utils.js:19 Error: [@formatjs/intl Error MISSING_DATA] Missing locale data for locale: "sp" in Intl.NumberFormat. Using default locale: "en" as fallback

消除错误

我设法通过设置默认语言环境并像这样处理 onError 来抑制错误

function onError(e) {
    if (e.code = ReactIntlErrorCode.MISSING_DATA) {
    return
    }
}

<IntlProvider key={locale} locale={locale} messages={res[locale]} defaultLocale="en" onError={onIntlError}>

然而，这并不是真正的解决方案，因为现在服务器端呈现将与实际请求的页面不同（已嵌入到 url 中）。 http://localhost/rs/page

库中失败的行

特别是在 SSR 库中失败的行是这一行，因为语言环境返回一个空数组。

else if (!Intl.NumberFormat.supportedLocalesOf(locale).length && onError) {

水合错误

此外，如果我使用上面的 onError 技巧，我自然会收到 SSR 水合物错误，因为它在服务器上以不同的语言呈现

"Warning: Text content did not match. Server: "Notifications" Client:
"Notificaciones"

如何让 nextjs ssr 理解语言环境？

Answer 1

您需要 Node 14+。节点 12- 没有所有的语言环境数据。

react-intl 与服务器端渲染

1 个答案: