Next.js custom App getInitialProps TypeError

Question

I have quite a simple app with Next JS starter kit and I am trying to get it work with custom app as specified on the docs here:

class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};
    const isAuthenticated = await (process.browser
      ? Auth0Client.clientAuth()
      : Auth0Client.serverAuth(ctx.req));

    console.log("isAuthenticated: ", isAuthenticated);

    if (Component.getInitialProps) pageProps = await App.getInitialProps(ctx);

    const auth = { isAuthenticated };
    return { pageProps, auth };
  }

  render() {
    const { Component } = this.props;
    return <Component auth={this.props.auth} />;
  }
}

It is placed inside _app.js of pages folder.

The thing is that my index page also has static

static async getInitialProps

and it triggers the following error for some reason:

TypeError: Cannot read property 'prototype' of undefined

You can see my _app.js file here by this URL: https://github.com/bodrovphone/next-app/blob/breakingPoint/pages/_app.js

And index.js file URL here: https://github.com/bodrovphone/next-app/blob/breakingPoint/pages/index.js

Steps to reproduce:

1. clone the project at this branch
2. npm install
3. npm run dev
4. navigate to localhost:3000

I would appreciate any assistance!

Answer 1

You need to run the respective Component's getInitialProps each time, and not the App's.

Change your _app.js following line:

if (Component.getInitialProps) pageProps = await App.getInitialProps(ctx);

to

if (Component.getInitialProps) pageProps = await Component.getInitialProps(ctx);

I hope this solves your issue.