路由到另外一个页面_Nextjs使用解读一（项目搭建与路由系统）

文章说明：
1. 之前想搭建个人博客，由于学习的是react技术栈，所以就到处搜罗资料学了nextjs，配合koa就把博客搭起来了。该系列文章基于我的学习笔记，重新整理了一遍，如果有错误之处，还请指正。
2. 个人能力有限，我更注重的是使用，所以对于许多原理也只是简单理解，并未深究。如果是想研究源码，或者追求性能深度优化的老铁，可以不用往下看了
3. 转载请注明出处

各工具版本：npm v6.10，node v12.13，react v16.12，next v9.1

可能需要的预备知识：React项目经验、nodejs开发经验，webpack、npm等常用工具使用经验。最好会koa（部分地方可能会用到）

一、Nextjs与服务端渲染

Nextjs的官方解释：Next.js 是一个轻量级的 React 服务端渲染应用框架。

服务端渲染，顾名思义，就是在服务器上就把网页渲染好了，你请求时，直接发给你渲染好的页面。知道了原理，ssr的优势劣势也就很明显了：

与客户端渲染比较

优势：
1. 更利于SEO，便于搜索引擎收录。因为大多数爬虫只会爬源码，不会爬脚本，当服务端返回渲染好的数据后爬虫便能直接爬取了。
2. 利于首屏加载。这个简单，服务端发过来的就是渲染好的，客户端就省事了，加载也就快了。

劣势就是：1. 服务器的压力大了(多了活要干)；2. 对开发人员要求也高了
（深有体会，量发而行！这已经不属纯正血统的前端范畴了，因为要成功部署的话，你还不得不心甘情愿地去学点服务器知识、Linux运维、nginx部署等）

特别注意

1. 当服务端渲染时，服务端是没有window、document对象的（浏览器端才有），直接调用会报错。想用这俩对象的话最好放在didAmount周期函数里，等组件挂载后再调用（其实从这一点来说，这只能算是半服务端渲染......扯远了）
2. 另外，Nextjs自带的服务器专注于处理ssr部分，但后端往往还需要处理文件、连接数据库等功能，此时还需要借助其他的node服务器，我这选用了koa2，然后让nextjs作为koa的一个专门负责ssr的中间件。

二、搭建Nextjs项目

实践出真知。介绍完了，作为正经的程序员，先上手一个再慢慢研究。我们按照官网的