Question

根据next.js documentation，如果要自定义<App>，则必须创建一个pages/_app.js页面，然后将修改内容放入其中。

仍然，在他们的示例中有一些代码，我不知道它的目的是什么

import React from 'react'
import App, { Container } from 'next/app'

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

  render () {
    const { Component, pageProps } = this.props

    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    )
  }
}

这是最小格式吗？此示例会改变初始行为吗？

换句话说，这段代码是否足以扩展原始应用程序：

import React from 'react'
import App from 'next/app'

export default class MyApp extends App {}

Answer 1

是的，您所拥有的不会改变任何东西，并且是扩展App的最低要求（我已经对此进行了测试）。

我认为它们之所以在文档中包含覆盖的getInitialProps和render方法，是因为这些位置可能是您要向其中添加自定义内容的地方，并且其中的代码是如果您要覆盖它们，则需要。

例如，如果您覆盖getInitialProps但不返回Component.getInitialProps(ctx)的结果（在这种情况下Component是当前页面组件，例如./pages/index.js），则您的页面组件将赢得没有设置初始道具。

最小程度地替换_app.js而不改变基本行为

1 个答案: