连接NextJS，next-i18next，with-redux，with-redux-saga：“错误：如果你的自定义_app.js文件中有一个getInitialProps方法...”

Question

我正在尝试将使用'with-redux-saga'和'with-redux'的功能正常的NextJS / React应用程序连接到'next-i1iN'（https://github.com/isaachinman/next-i18next） - 但是当我的应用程序启动时，我收到以下错误：

错误：如果自定义_app.js文件中有getInitialProps方法，则必须显式返回pageProps。有关更多信息，请参阅：https://github.com/zeit/next.js#custom-app

TypeError：无法在Function.getInitialProps中读取未定义的属性'namespacesRequired'（/Users/cerulean/Documents/Projects/PAW-React/node_modules/next-i18next/dist/hocs/app-with-translation.js:94:57） at process._tickCallback（internal / process / next_tick.js：68：7）

但我正在我的_app.js返回页面道具。

// _app.js
 static async getInitialProps({ Component, ctx }) {

    const pageProps = {};
    let temp;

    if (Component.getInitialProps) {
      temp = await Component.getInitialProps({ ctx });
    }
    Object.assign(pageProps, temp);
    return { ...pageProps };
  }

也许我如何将各种HOC挂钩在一起有什么问题？在_app.js我有：

export default withRedux(createStore, { debug: false })(withReduxSaga({ async: true })(i18nInstance.appWithTranslation(MyApp)));

在我的index.js我有：

   // index.js
const mapStateToProps = (state) => ({ homeData: getHomePageData(state) });

export default connect(mapStateToProps)(withNamespaces('common')(Index));

任何见解都非常感谢！

Answer 1

对于任何人来到这个问题，并想知道@cerulean在his answer意味着什么。

1) use require instead of import

如果您使用自定义服务器（more info），NextJS不会转换您的模块。因此，你不能在你的下一个i18next配置中使用import，而不会经历一个泪流满面的问题。

// NextI18NextConfig.js

const NextI18Next = require('next-i18next/dist/commonjs')

module.exports = new NextI18Next({
  defaultLanguage: "en",
  otherLanguages: ["de"]
  // ... other options
});

// server.js

const nextI18next = require("./path/to/NextI18NextConfig");

// ... the rest of your server.js code

这是来自next-i18next example和 documentation的混搭

---

2) keep pageProps as it is

你不能用getInitialProps返回值玩太多。如果你需要添加额外的东西，你应该小心不要更换或操纵pageProps。见下文。

  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    const extraStuff = doSomeExtraStuff()

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps, extraStuff }
  }

关于this thread的更多信息。

Answer 2

遇到类似情况的人有两件事。

1）当他们说'return pageProps'时，它意味着'return pageProps'，而不是'... pageProps'

2）我在设置'next-i18next'单例的文件中使用了ES6 import语句。需要使用'require'和'module.exports'

现在它有效......