Next.js 自定义应用 getInitialProps TypeError

Question

我有一个带有 Next JS 初学者工具包的非常简单的应用程序，我正在尝试让它与 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} />;
  }
}

它位于 pages 文件夹的 _app.js 内。

问题是我的索引页也有静态

static async getInitialProps

并且由于某种原因它触发了以下错误：

TypeError: Cannot read property 'prototype' of undefined

你可以通过这个URL在这里看到我的_app.js文件： https://github.com/bodrovphone/next-app/blob/breakingPoint/pages/_app.js

和 index.js 文件 URL 在这里： https://github.com/bodrovphone/next-app/blob/breakingPoint/pages/index.js

重现步骤：

克隆项目 at this branch
npm 安装
npm 运行开发
导航到 localhost:3000

如有任何帮助，我将不胜感激！

Answer 1

您每次都需要运行相应的 Component 的 getInitialProps，而不是 App 的。

更改您的 _app.js 以下行：

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

到

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

希望这能解决您的问题。

Next.js 自定义应用 getInitialProps TypeError

Next.js custom App getInitialProps TypeError

javascript

reactjs

next.js