Параметризованный динамический импорт с помощью next.js

Question

Я пытаюсь интегрировать средства форматирования, созданные с помощью пакета globalize npm, в приложение на основе next.js. Средства форматирования хранятся в файлах для конкретных локалей. Идея состоит в том, чтобы динамически импортировать средства форматирования для конкретной локали на основе текущей локали. Текущая информация о локали доступна через интеграцию next-i18next в методе getInitialProps страницы, но поскольку средства форматирования содержат функции, импортирующие средства форматирования в getInitialProps и передающие их вместе с исходными реквизитами, не работает.

Каким может быть обходной путь для достижения желаемого поведения?

Answer 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;
}