next-自定义App

Next.js 使用 App 组件来初始化页面。你可以覆盖该 App 组件并控制页面的初始化。这让你可以做一些“很吓人”的事情，例如：

• 页面切换之间保持布局的持久化
• 切换页面时保持状态（state）
• 使用 componentDidCatch 自定义错误处理
• 向页面（pages）注入额外的数据
• 添加全局 CSS
• 要覆盖默认的 App，首先创建 ./pages/_app.js 文件，如下：

import App, { Container } from "next/app"

class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props
        return (
            <Container >
                <Component {...pageProps} />
            </Container>
        )
    }
}

export default MyApp;

Component 属性即当前 page，因此，每当你在路由之间切换时，Component 都会更新为新的 page。因此，你传递给 Component 的任何属性都将会被 page 接收到。

pageProps 是带有初始属性的对象，该初始属性由我们的某个 数据获取方法 预先加载到你的页面中，否则它将是一个空对象。

import App, { Container } from "next/app"

class MyApp extends App {
    static async getInitialProps(ctx) {
        let pageProps
        const { Component } = ctx
        if (Component.getInitialProps) {
            pageProps = await Component.getInitialProps(ctx)
        }
        return {
            pageProps
        }
    }
    render() {
        const { Component, pageProps } = this.props
        return (
            <Container >
                <Component {...pageProps} />
            </Container>
        )
    }
}

export default MyApp;

注意事项

• 如果你的应用程序正在运行中，而你刚刚对 App 组件进行了自定义（并且 pages/_app.js 文件以前并不存在），那么你需要重新启动开发服务器。
• 在 App 中添加自定义的 getInitialProps 方法将导致在没有 静态生成 的页面中禁用 自动静态优化。