Next.js 集成 React + Antd-design 踩坑记

作为一个 React 小白（至今未写过 react 项目），接到需求的第一步就是选择 Google，以为自己很 lucky，搜到了标题为 Typescript+Ant-Design + Redux+Next.js搭建服务端渲染框架 的一篇文章，粗略看了下立马开撸，毕竟实践才能发现真理，撸完之后项目跑得非常完美，以为自己的工作已经完成百分之五十了，因为项目要做国际化，要实现多语言，于是又是一波 Google，刚好有一篇 Next.js 配置 react-intl 实现语言国际化 的文章，以为自己可以很顺利的完成这个框架的搭建，万万没想到，大坑不断，先是因为文章 demo 中调用的一些 API 在新版本被弃用了，然后去 github 上看 react-intl 官方给的 demo，并想寻找可替代方案，但是越改报错越多，虽然程序员制造 bug 不奇怪，但是越来越多不可预测的 bug 和坑，让我果断选择放弃当前方案，选择求助。

小伙伴给了个建议（很棒的建议），去看 Next.js 官方给出的例子，把需要的自己拼凑起来改一改。（第一次接触 next，并不知道它官方给出了那么多demo，可以说是很全面了，一目了然。）
于是进度 50% 变成了 0。开始从头梳理我做的这个项目需要参考的 demo 主要有哪些：

* 多语言     -- react-intl（官方推荐）
* 样式       -- jss 
* UI 库      -- antd-design-less
* 路由       -- using-with-router
* http 请求  -- data-fetch   

先从多语言下手，进度还算顺利，但是想用中文的时候，发现控制台报错，于是去查看官方 demo 里的 README 文档，

意思大致是只有生产环境才能看到效果，所以必须先 build，然后再启动项目多语言这一块才不会有警告和报错。

这一步完成之后，接着拼上了样式的 demo，这一块比较顺利，但是后来发现当前页面的样式在页面加载时是生效的，但是刷新当前页面，样式将不再生效，暂时还没找到原因，还没填上这个坑，正在求助中。。。

第三步，拼凑的是 UI 库，coding 过程还算顺利，没有报什么看不懂的错误和警告，至少控制台没有出现一片红色的情况，但是 antd-design 样式没有生效，不知道是哪一步出了故障，目前也没找到原因，靠自己是填不了这个坑了，也是正在求助中。。。

原因：没有配置 antd-design 插件
解决方案：修改 .babelrc 文件，改为如下所示    

第四步，加上路由，暂时没有踩到坑，比较顺利的加上了 demo。

发现刷新当前页面时报错，尚未解决。

第五步，加 http 请求。也还算顺利的改造了下代码，暂时无坑。

最后，优化了下项目目录结构，基础框架搭建完毕。

这里面花费时间最多的是多语言，一开始是方案不正确，然后想改造官方多语言 demo，想写成之前 vue 项目里面的多语言那样，把文件夹分的细一些，但是没有成功，越改报错越多，最后通过不了编译，选择放弃。

总结：对于一个第一次写 React 项目的 react 小白来说，第一步就需要自己搭框架，觉得跨度有点大，有点困难，而且还需要做服务端渲染，这一块也是不熟悉的，之前从未接触过的。通过目前踩坑的情况来看，一定要多看官方给出的文档例子啥的，虽然于自己而言源码几乎是看不懂的，但是仔细阅读文档和研究官方给的例子，可以少踩一些坑，少走很多弯路。

It’s much better to think more and then do it than to get started.