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.