Intl Polyfill + Next.js SSR 申请

Question

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

Answer 1

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

Answer 2

Next.js 中的 polyfill（一般来说）

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

的 polyfill

formatjs / react-intl provides some polyfills 为 Intl API.

您需要的功能，例如 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');
  }
}