使用 next.js 进行参数化动态导入

【问题标题】：Parametrized dynamic imports with next.js使用 next.js 进行参数化动态导入
【发布时间】：2020-08-31 11:44:44
【问题描述】：

我正在尝试将使用 globalize npm 包生成的格式化程序集成到基于 next.js 的应用程序中。格式化程序存储在特定于语言环境的文件中。想法是根据当前语言环境动态导入特定于语言环境的格式化程序。当前的语言环境信息可通过页面的 getInitialProps 方法中的 next-i18next 集成获得，但由于格式化程序包含在 getInitialProps 中导入格式化程序并将它们与初始道具一起传递的函数，因此不起作用。

实现所需行为的任何潜在解决方法是什么？

【问题讨论】：

标签： next.js globalize next-i18next

【解决方案1】：

我最终将 HOC 与动态导入一起使用：

const formatters = {};
LOCALES.forEach((locale) => {
    formatters[locale] = dynamic(() => {
      return import(`../../public/static/globalize/locales/${locale}/formatters-${locale}.js`);
    });
});
    
export default function withFormatter(Page) {
    const PageWithFormatter = (props) => {
    const lang = i18n.language || props.currentLanguage || 'en';
    
    const formatter = formatters[lang]('').type(lang);
    
    return (
      <GlobalizeContext.Provider value={{ formatter }}>
        <Page {...props} />
      </GlobalizeContext.Provider>
    );
  };
    
  PageWithFormatter.getInitialProps = async ({ req }) => {
    const currentLanguage = req ? req.language : '';
    
    return { currentLanguage };
  };
    
  return PageWithFormatter;
}

【讨论】：