1

globalize npm パッケージで生成されたフォーマッターを next.js ベースのアプリケーションに統合しようとしています。フォーマッタは、ロケール固有のファイルに保存されます。アイデアは、現在のロケールに基づいて動的にロケール固有のフォーマッターをインポートすることです。現在のロケール情報は、ページの getInitialProps メソッドでの next-i18next 統合を介して入手できますが、フォーマッターには getInitialProps でフォーマッターをインポートする関数が含まれているため、それらを初期プロップと共に渡すことはできません。

望ましい動作を達成するための潜在的な回避策は何ですか?

4

1 に答える 1

0

動的インポートで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;
}
于 2020-05-15T15:07:13.107 に答える