Intl Polyfill + Next.js SSR 应用程序答案

【问题标题】：Intl Polyfill + Next.js SSR applicationIntl Polyfill + Next.js SSR 应用程序
【发布时间】：2020-11-28 01:08:37
【问题描述】：

如何在 Next.js 应用程序上填充 intl？有的中文浏览器还是没有，我们用react-intl，需要Intl。

【问题讨论】：

标签： webpack next.js server-side-rendering react-intl

【解决方案1】：

Next.js 中的 polyfills（一般）

Next.js 有一些一般的 polyfill 示例：
https://github.com/vercel/next.js/tree/canary/examples/with-polyfills

Next.js 建议在 <App> 组件中或在使用 polyfill 的单个组件中导入所需的 polyfill。

例如：

// /pages/_app.js

import 'polyfill_some_feature';

function MyApp({ Component, pageProps }){
  return <Component { ...pageProps } />
}

export default MyApp

`Intl` API 的 polyfills

formatjs / react-intl 为Intl API 提供了一些polyfills。

您需要的功能，如Intl.getCanonicalLocales、Intl.Locale、Intl.PluralRules、...，必须单独导入。

请注意，polyfill 相互依赖，因此它们的调用顺序很重要。
例如。 Intl.getCanonicalLocales 的 polyfill 会检查 typeof Intl === 'undefined' 是否存在，但 Intl.Locale 的 polyfill 已经依赖于 Intl 的存在。

这是他们的一个例子（这个是为了实现getCanonicalLocales）：
https://formatjs.io/docs/polyfills/intl-getcanonicallocales/#dynamic-import--capability-detection

npm i @formatjs/intl-getcanonicallocales

import { shouldPolyfill } from '@formatjs/intl-getcanonicallocales/should-polyfill';

async function polyfill() {
  if( shouldPolyfill() ){
    await import('@formatjs/intl-getcanonicallocales/polyfill');
  }
}

【讨论】：

【解决方案2】：

您可以使用 custom express server 来应用 Intl polyfill。

【讨论】：

Next.js 中的 polyfills（一般）

Intl API 的 polyfills

`Intl` API 的 polyfills