Next.js 自定义 App 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

重现步骤：

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

我将不胜感激！

Answer 1

您需要每次运行各自的ComponentgetInitialProps，而不是App。

更改您的 _app.js 以下行：

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

到

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

希望这能解决您的问题。