Connecting NextJS, next-i18next, with-redux, with-redux-saga: "Error: If you have a getInitialProps method in your custom _app.js file..."

For anyone coming to this issue and wondering what @cerulean meant in his answer.

1) use require instead of import

NextJS doesn't transpile your modules if you use a custom server (more info). Therefore you cannot use import in your next-i18next configuration without going through a vale of tears.

// NextI18NextConfig.jsconst NextI18Next = require('next-i18next/dist/commonjs')module.exports = new NextI18Next({  defaultLanguage: "en",  otherLanguages: ["de"]  // ... other options});

// server.jsconst nextI18next = require("./path/to/NextI18NextConfig");// ... the rest of your server.js code

This is a mix&match from next-i18next example and documentation

2) keep pageProps as it is

You cannot play too much with getInitialProps returned value. If you need to add extra stuff you should be careful not replacing or manipulating pageProps. See below.

  static async getInitialProps({ Component, ctx }) {    let pageProps = {}    const extraStuff = doSomeExtraStuff()    if (Component.getInitialProps) {      pageProps = await Component.getInitialProps(ctx)    }    return { pageProps, extraStuff }  }

More about it on this thread.

If you have config redux sagas correctly, this way work for me:

export default withRedux(configureStore)(withReduxSaga(appWithTranslation(MyApp)));

Two things for those who encounter a similar situation.

1) When they say 'return pageProps', it means 'return pageProps', not '...pageProps'

2) I was using ES6 import statements in the file which set up the 'next-i18next' singleton. Needed to use 'require' and 'module.exports'

Now it works...