next自定义App

作用

  • 固定Layout
  • 保持一些公用的状态
  • 给页面传入一些自定义数据

  • 自定义错误处理

    代码

    1. import App,{Container} from 'next/app'
    2. class MyApp extends App {
    3. static getInitialProps({Component,ctx}){
    4.   //Component 就是下面的Component组件
    5.   //返回的参数会作为props被获取到
    6.   //每次页面切换，该方法都会执行
    7.    let pageProps
    8.     if(Component.getInitialProps){
    9.        pageProps=await Component.getInitialProps(ctx)
    10.     }
    12.   return {
    13.     pageProps
    14.   }
    15. }
    16. render(){
    17.   const {Component,pageProps}=this.props;
    18.   //Component是传过来的页面组件,pageProps就是页面中有服务器端渲染的
    19.   //函数返回的数据可以被组件的props使用的原因
    20.   return （
    21.     <Container>
    22.       <Component {...pageProps}>
    23.     <Container>
    24.   ）
    25. }
    26. }

    next自定义Document

    定义

    只有在服务器端渲染的时候才会被调用
    用来修改服务器端渲染的文档内容
    一般用来配合第三方css-in-js方案使用

    代码 _document.js (只有在服务器端渲染的时候，才会生效)

    ```javascript import Docuemnt,{Html,Head,Main,NextScript} from ‘next/document’

class MyDocument extends Document { static async getInitialProps(ctx){ //一旦重新写了getInitial方法，必须冲新调用 //一下，getInitialProps方法

  1. const props=await Document.getInitialProps(ctx)
  2. return {...props}

} render(){ //可以不重写render方法，但是一旦重新，就要写全 return

} } ```

样式定义