在本文中，您将学到babel，webpack，next.js, 飞冰的一些基础使用。
以及最重要的一点，不屈不挠的爬坑精神。
飞冰是什么
next.js是什么
正文开始
第一步 使用飞冰的模版创建一个项目
这里选择自定义模版，只需要它生成项目框架。
注意：这里先不要添加依赖,飞冰自己安装的webpack版本会导致next.js无法使用自身的配置启动项目。
当然，你也可以像我一样尝试，找一个酷炫的模版
然后经历如下步骤
添加依赖
npm install --save next react react-dom
安装完后，可以安装所有依赖了
npm install
安装完后，配置package.json文件,这里指定pages文件夹位于src下
到这里是不是已经迫不及待想要
npm run dev
一切看起来风和日丽，格外美丽，我们尝试显示NotFound页面
http://localhost:3000/NotFound
WTF？剧情不是这样的啊！为什么会报错，生活终于对我这只小猫咪下手了吗？
这里需要添加flie-loader来解析图片，以及sass的插件来解析scss
npm install file-loader @zeit/next-sass node-sass --save -D
然后在项目根目录新增next.js的配置文件 next.config.js
接下来继续
http://localhost:3000/NotFound
你会碰到几个 document window is undefined的错误，直接找到相应的地方增加判断
然后回到BasicNotFound.jsx中，注释飞冰使用的Link，改为a标签的href
至此，只差最后一个坑我们就能将页面展示出来了，我们需要让项目正确的识别
import IceContainer from '@icedesign/container'
我们使用babel-plugin-module-resolver插件解决
npm install --save-dev babel-plugin-module-resolver
增加.babelrc配置文件来使用该插件
至此，页面可以正确展示。
为什么明明成功展示了，却有种失败的感觉呢。
这个不用介绍了吧，自己google
这个我也不管， ssr、同构嘛，也就那回事。
.babelrc
如上，简单的一种引用方式。next 改造同方案二。
由于在我项目中，各个模块不耦合，路由间不想干，所以各自处理就ok。
ssr 中要解决的一个很大的问题就是 server 和 client 之间状态同步的问题。如下:
留有问题：上边 initState 其实是没有意义的。
解决方案: 没想到。求大佬指教。
体积大。next.js是react的一个前端框架。react本质上是一个UI库，用于操作虚拟DOM，next.js是基于react的一个前端框架。next.js不火是因为本地开发、构建所需要的开发时依赖，而且开发时依赖体积又大。用next.js可以快速搭建一个react服务端渲染的框架，相比于直接用react配置服务端渲染简单了不少。
