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.