nextJS自定义App

作用

1.固定Layout
2.保持一些公用的状态
3.给页面传入一些自定义数据
4.自定义错误处理

示例

_app.js

import App, { Container } from 'next/app'
import 'antd/dist/antd.css'
import Layout from '../components/work/layout'
class AntApp extends App {
    static async getInitialProps( { Component } ) { 
        if(Component.getInitialProps){
            const pageProps = await Component.getInitialProps()
            return { pageProps }
        }else{ return {}}
    }
    render(){
        const { Component,pageProps } = this.props
        return(
            <Container>
                <Layout>
                    <Component {...pageProps} />
                </Layout>
            </Container>
        )
    }
}
export default AntApp

layout组件

import Link from 'next/link'
export default ({ children }) => (
    <header>
        <Link href='/task?taskName=测试任务'>
            <a>任务</a>
        </Link>
        <Link href='/project'>
            <a>项目</a>
        </Link>
        <div>
            {children}
        </div>
    </header>
)