next.js+koa2+antd环境轻松搭建

前言

本文将会介绍next.js环境的搭建,这里将会以next+koa2+ant desin为例,搭建全栈开发的环境,看完后我想大家应该也会知道如何将next与express,egg.js等框架和element UI等UI组件库进行自由组合，选择出适合自己的方案。

适合人群: 对于node.js有了解,对于react有了解，听过服务端渲染但并没有实践过，知道next.js但是不会将其与后端框架与UI组件库组合的小伙伴。

Tips: 本文作者也是一个菜鸟,写文章的意图一方面为了加强自己对next的掌握程度，另一方面希望可以帮到真有这样需求的小伙伴。

使用自定义的方式搭建next环境

创建项目目录

• mkdir next-learn
• cd next-learn

如果使用windows的小伙伴,可以下载git，通过git bash来使用以上命令，或者去通过桌面环境去创建next-learn文件夹，这里希望大家都可以尽量使用命令行来进行操作。

npm/yarn初始化

这里我想大家对于npm都比较了解,但是可能有很多小伙伴听说过yarn但并没有去了解过。这里简单说一下: npm的下载速度有时候真的很让人难受，yarn的出现可以使这种情况有很大的缓解,甚至很多情况它比使用淘宝镜像还要快，感兴趣的小伙伴可以去官网简单了解并下载使用。

• npm进行初始化：npm init
• yarn进行初始化: yarn init

大家可以一直回车,这里我将使用yarn

next, react, react-dom的安装

这一步next.js官网介绍的也很详细

• npm安装 npm install next react react-dom --save
• yarn安装 yarn add next react react-dom

更改package.json文件

通过npm init的小伙伴打开package.json会有"scripts"字段 但通过yarn init初始化的package.json没有"scripts"字段，因为yarn初始化后会删除package.json中空对象，我们可以自行增加

"scripts": {
  "dev": "ne