Next.js React component getInitialProps doesn't bind props

Question

In Next.js, you can use in your React components a lifecycle method bound to the server side rendering on first load.

I tried to use this function as presented in the ZEIT tutorial (alternatively on their Github), but this.props doesn't seem to get JSON returned by the function. When I click on the component, console print an empty object.

import React from 'react'
import 'isomorphic-fetch'
export default class extends React.Component {
    static async getInitialProps () {
        const res = await fetch('https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json')
        const data = await res.json()
        return { data }
    }
    print() {
        console.log(this.props);
    }
    render() {
        return <div onClick={this.print.bind(this)}>print props</div>
    }
}

Answer 1

I had this issue due to a problem in my _app.js (i.e. NextJS Custom App) which I caused while adding in Redux (not a Redux issue). As soon as I started using getInitialProps in a page my props were empty at render though data was there in the static call. The cause was the incorrect propagation of pageProps in my _app.js.

So in my case the fix was changing, in custom _app.js getInitialProps, this:

return {
  ...pageProps,
  initialReduxState: reduxStore.getState()
}

to:

return {
  pageProps: {...pageProps},
  initialReduxState: reduxStore.getState()
}

.. so the render method as seen in the NextJS doc link could wire them through.