目的：因为nextjs里面是直接没有index.js，有时候我们需要整个项目遵循一个layout或者是一个link(比如tailwind)，那么这个时候，_app和_document的真正的意义才会开始存在
为什么自定义_app ?
自定义_app d饿目的就是有的时候我们需要load一个component，但是需要这个component符合某一个特定的样式，但是我们又不想重复的写css，那么这个时候_app的意义就有了
'''
import App from "next/app";
import "antd/dist/antd.css";
class MyApp extends App {
// 全剧数据获取
static async getInitialProps({ Component, ctx }) {
// 获取组件的get initial props
// 因为get initial props通常都是异步的，所以这里如果我们使用async
// 一定要加上await
// 每当页面切换的时候，这个方法都会被执行Z
let pageProps;
console.log("the global func is working ...");
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
return <Component {...pageProps} />;
}
}
export default MyApp;
'''
为什么我们需要写_document ?
首先，我们没有index.html，有时候我们需要在添加外部的link，比如tailwind和animate.css，那么这个时候我们就要自定义document
'''
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const componentProps = await Document.getInitialProps(ctx);
return {
...componentProps
};
}
render() {
return (
<Html>
<Head>
</Head>
<body className="test">
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
'''
