推荐文档：生成<head> - 《next.js v7.0 中文文档》 - 书栈网 · BookStack
1，解决的问题
SPA单页面应用的两个问题：首屏加载过慢，不能SEO(搜索引擎抓取）
2，它是一个react服务端渲染框架
3，做的事
帮助我们配置webpack，路由
自带数据同步（后端数据和前端）
很多插件（生态）
灵活的配置
4，搭建方式：create-next-app脚手架或者手动
5，手动搭建next.js
npm init
npm install react react-dom next
配置package.json
Dev. Next
Build next build
Start next start
pages页面next自动将该文件夹中进行路由配置
6，使用creat-next-app脚手架
Sudo nom install -g create-next-app
npx create-next-app 项目名称
虎扑初始化一个next.js项目：
yarn create next-app --typescript
7，页面访问路径自动加载
next.js的pages中的js，jsx默认export defualt就是导出一个组件
也可以通过中pages中新建其他文件夹比如component，在其中添加about.js
则访问localhost:3000/component/about即可，
但是pages中的api文件夹是特殊的，里面的文件不可以这样去访问。
8，pages下的各个js文件的路由link默认已经配置了，即：以前react-router-dom需要在App标签外包一层browserRouter，现在不需要了。
如果pages页面下某js文件路由到pages页面下另一个js文件，不需要引入该js文件，路由名称直接写该文件名即可。因为pages文件夹下的js文件自动处理成路由，所以该文件夹应该放路由页面，不要放其他组件。
所以如果pages下的某个js文件加载了一个外部（pages外）组件，这个组件具有路由跳转，这个时候该组件需要引入目标页面的js文件吗？
9，link和a
pages下的路由跳转， 如果直接使用以下方式跳转，仍然会把所有页面一次性加载
<a. href=‘/second’>跳到第二个页面</a>
如果使用Link标签则加载到该页面才进行加载
<Link href=‘/second’>
<a>跳到第二个页面</a>
</Link>
注意：导入Link不需要加{}:
Import. Link from ‘next/link’;
10，link标签下只能有一个标签（不允许有兄弟标签）
11，动态路由
这样的一个路径http://192.168.0.100:3000/basketball/v2/nba/team/entry/1901000000501267
对应文件夹中的结构：pages/[leagutype]/team/entry/[tid].js
在该路径下的文件[tid].js能够通过context.query获取真实url中对应的tid(1901000000501267)以及leagutype(basketball/v2/nba)
如果url中包含参数?tid=10&b=100，通过context.query依然获取tid(1901000000501267),b(100)而不是tid(10)
{tid, b} = context.query
12,nextjs的ssr
Next.js 的三种渲染方式（BSR、SSG、SSR） - 知乎
ssr和csr的区别：
13，getServerSideProps（或getStaticProps）
假如某个页面每个用户看到的数据都一样（因为和用户没关系，比如球队页），就可以用ssr，直接后端把这个页面渲染好传给前端，但是这个过程不需要前端发起请求，就直接用getServerSideProps这个管道函数就行，其返回值将会作为本页面props传入。
14，getInitialProps
页面初次加载的时候，该函数只会在服务端执行一次。只有路由link切换，或者组件跳转的时候，才会在客户端执行该函数。
它只能用在pages页面，不可用在子组件。
15，getStaticPaths
获取静态路由(必须和getStaticPtops配合）
16，getStaticProps
15，服务端渲染优化seo
加载getServerSideProps传过来的数据，因为先获得props，然后渲染dom，然后执行componentDidmount里面的东西。所以如果props中的数据一开始没有使用，而是在componentDidmount中处理过后再加载dom，就不会出现在body中，那么seo就失败了。
所以从props传递过来的数据最好是已经处理好的直接在componentDidmount之前渲染到dom中，就会出现在body中
右键选择网页源代码，选择自动换行，查看从服务端传递过来的数据是否进入body中。
