本文介绍Next.js中自定义App组件与Document组件的方法，包括如何重构App组件以实现全局状态管理、自定义错误处理及数据注入，同时探讨自定义Document以优化服务器端渲染。
每个项目产品都要加埋点，加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧
自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄
原文链接：https://juejin.im/post/5cc08f0de51d453f38191d64
前言
这篇文章将介绍Next.js中自定义App组件、Document组件以及什么时候需要自定义这些内容，这可能会是我们每个项目中都要做的事情，So,让我们一起掌握它吧。
Tips: 按照惯例声明，笔者也是个入门级选手，文章深度无法达到大佬级文章水平，只希望能对各位入门级的小伙伴有所帮助。
自定义App
首先说一下为什么要自定义App，这里的App其实就是我们平时写react时候的根组件。 1）通过重写
_app.js文件，我们可以对App组件进行重构，在App组件中加入一些项目中不变的内容，比如页面的布局；2）在App中保持公用的状态，这里的公用状态也可以是一些全局的css，比如我们之前搭建环境的文章中加入的
antd.css；3）以及给页面传递自定义的数据，
4）使用
componentDidCatch自定义处理错误;5）注入额外数据到页面里 (如 GraphQL 查询)
在next.js+koa2+antd环境轻松搭建 一文中，我们曾经写过一个_app.js来引入antd的css,在这里我们对除了引入antd.css其他事情什么都没做，引入antd.css之后，它就会在全局生效。
-
import App from 'next/app' -
import 'antd/dist/antd.css' -
export default App -
复制代码
现在就来对它进行一些改变
-
import App, { Container } from 'next/app' -
import 'antd/dist/antd.css' -
// 新增了这一段 -
class MyApp extends App { -
render() { -
const { Component } = this.props; -
console.log(Component); -
return ( -
<Container> -
<Component /> -
</Container> -
) -
} -
} -
export default MyApp -
复制代码
对比这一段代码，这里从next/app中多引入了一个Container组件，并在中间重新写了一个MyApp类，继承自App,最后将其返回。在MyApp中，重写了render方法来渲染组件，其中从props中拿到的Component组件就是在访问每个pages下的js文件时候，这些文件返回的组件。想想也是，在写react的时候，其他组件要显示也是要包裹在最外层的App组件中的，这里是一样的道理。 值得注意的是，这里的MyApp组件返回Component时候最外层要使用Comtainer组件进行包裹。我们可以顺手打印出Component，看看到底是不是向我们所说的一样。
重写getInitialProps
不过现在并不算完成，我们连App原本的功能还没实现完整：在当前组件中，我们是拿不到其他页面getInitialProps()方法初始话的数据的，如果对getInitialProps()不了解，请翻阅很简单的next.js数据获取规范或者官方文档 这里可以给大家看一个例子
这里在getInitialProps()中定义的数据并没有显示出来
-
class MyApp extends App { -
static getInitialProps = async ({Component}) => { -
let pageProps; -
if(Component.getInitialProps) { -
pageProps = await Component.getInitialProps() -
} -
return { -
pageProps -
} -
} -
render() { -
const { Component, pageProps } = this.props; -
console.log(Component); -
return ( -
<Container> -
<Component {...pageProps} /> -
</Container> -
) -
} -
} -
复制代码
这里在MyApp中新增了一个getInitialProps方法，注意他是一个静态方法，由于其他页面可能设置了getInitialProps也可能没有设置，所以这里需要判断一下，并且这个方法为异步方法，执行时注意加上await并在外层方法添加async。这样就可以将其他页面中getInitialProps设置的属性引入过来，并且传递给Component就可以显示了，来看看效果吧
这里就可以正常打印了
管理全局数据举例
-
state = { -
counter: 20 -
} -
复制代码
例如在MyApp中定义counter，就可以传递给所有组件 布局示例 在components目录下创建Layout.jsx
-
import Link from 'next/link'; -
import { Button } from 'antd' -
export default ({ children }) => { -
return ( -
<> -
<div className="header"> -
<Link href="/a?id=1"><Button>跳转A</Button></Link> -
<Link href="/test/b"><Button>跳转B</Button></Link> -
</div> -
<div className="body"> -
{children} -
</div> -
</> -
) -
} -
复制代码
然后在_app.js中引用
-
return ( -
<Container> -
<Layout> -
<Component {...pageProps} /> -
</Layout> -
</Container> -
) -
复制代码
这样每个页面都会显示Layout了
自定义Document
只有在服务器端渲染的时候才会被调用，主要用来修改服务端渲染的文档内容，通常实现服务端渲染会使用一些
css-in-js库(styled-jsx是 Next.js自带默认使用的css-in-js库) 它在_document.js中定义
-
import Document, {Html, Head, Main, NextScript} from 'next/document' -
class MyDocument extends Document { -
render() { -
return ( -
<Html> -
<Head> -
</Head> -
<body> -
<Main /> -
<NextScript /> -
</body> -
</Html> -
) -
} -
} -
export default MyDocument -
复制代码
在next/document中提供的并不仅是Document组件，还有一些跟HTML标签对应的组件，在重写的时候要记得都要写上。
在Head中试着添加一些内容
-
<Head> -
<title>My Next.js</title> -
<style>{`* { color: red}`}</style> -
</Head> -
复制代码
设置getInitialProps
再说明一下，document只有在服务端渲染时候才会执行。
在重写Docuemnt的时候，我们也可以重写getInitialProps方法，这个getInitialProps来自于Document组件。
-
static getInitialProps = async (ctx) => { -
const props = await Document.getInitialProps(ctx) -
return { -
...props -
} -
} -
复制代码
这里的getInitialProps也是个静态方法，并且也要加async，因为里面使用了await，并且注意有个参数ctx，我们可以不重写它，但是如果我们要重写就要按照这个格式来重写，然后在里面再添加自己想要的东西。
结束
本文内容是比较简单的，但是很重要，在使用next.js开发项目中是要经常使用的，所以还是掌握好它吧。在后面集成
css in js样式文章中可能还会再比较详细地描述在_docuemnt.js中我们可以干点什么，希望对入门级小伙伴有所帮助。
转载于:https://juejin.im/post/5cc08f0de51d453f38191d64
扫一扫
1004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
