Next.js踩坑入門系列（四）— 中期填坑

Next.js踩坑入門系列

• (一) Hello Next.js
• (二) 添加Antd && CSS
• (三) 目錄重構&&再談路由
• (四) Next.js中期填坑
• (五) 引入狀態管理Redux
• (六) 再次重構目錄
• (七) 其餘相關知識

填坑

第一坑 - params形式路由

上一篇在談到params路由和query路由的時候，留了一個坑，在這裏仍是來解決一下~事實證實，就是我想的那樣，可使用custom server而後從新匹配路由渲染的頁面就能夠了。不過這樣會出現一個小問題，就是在網速過慢的時候從新匹配的頁面沒渲染出來以前，控制檯會出現報錯，從新渲染以後消失。這就相似於302，剛開始是404頁面，而後被重定向到另外一個，哈哈~

能夠看一下控制檯，會出現一個報錯，可是這樣確實會成功使用params的路由。並且我發現一個問題，第一次進新頁面的時候Next.js渲染會特別的慢，不知道是否是一個bug，仍是我哪裏寫的有問題，再多研究研究~

報錯問題

好吧，去官網github查了一圈，也有人跟我同樣提了相同的issue，最後我看了一下發現，原來寫法出問題了，雖然能夠正常執行，可是會在正確頁面出現以前404如下。處女座的我不能忍受仍是改回來吧~

// 路由應該這麼寫
<Link href={`/user/userDetail?username=${text}`} as={`/user/userDetail/${text}`}>
  <a>{text}</a>
</Link>
// server.js
 server.get('/user/userDetail', (req, res) => {
  return app.render(req, res, `/user/userDetail/${req.query.username}`);
});
複製代碼

上面那樣就能夠了，具體代碼在下方~

第二坑 - 開發模式下首次加載antd不出樣式

最後，我仍是把antd的css形式換成了less形式，一方面是由於確實配置主題色以及其餘覆蓋樣式仍是有需求的，另外一方面是重點了，在開發模式下，next.js打開新頁面的pending time實在過長，這個過長的pending time致使第一次antd的樣式加載不出來。而換成less的模式雖然也很慢，可是樣式卻不會發生改變，因此仍是切換到less了。

• antd-css模式

• antd-less模式

能夠看出來，一樣是到新頁面去渲染一個table組件，雖然第一次加載時間都很長，可是less的形式是能夠加載出來css的。哈哈。因此仍是使用less吧，開發模式下，全部頁面的第二次加在都沒有問題，速度也很快。

next.js的生產環境仍是比較快的，開發環境打開第一次新頁面確實有點慢，基本都要10s左右...

生產模式

上面截圖也看到了，Next.js在開發模式下頁面第一次的pending時間是很是長的，基本都要達到10s左右，固然也多是我寫的代碼有問題？不過我去官方demo下面隨便用了一個，也是很慢的。

不由我就思考了，若是上線項目第一次加載也這麼慢，怎麼能夠呢？正在我考慮要不要半途而廢的時候，我嘗試了一下用生產模式打包一下，若是打包完生產環境首次加載也特別慢，那麼不扯淡呢嗎？拜拜了您嘞~

由於我用的custom-server，因此scripts變成了下面這樣:

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "set NODE_ENV=production && node server.js"
  },
複製代碼

打包完以後也是正常訪問，下面是打包完之後的訪問效果。

能夠看到，不管是首次加載頁面，仍是第一次進入其餘頁面，速度都是挺快的~因此我原諒了開發時的慢速度了，仍是接着學吧，O(∩_∩)O哈哈~

總結&&預告

這一篇文章有點水，可是我以爲仍是挺有必要的，由於可能不光是我，不少人也都會遇到這個問題，若是不解決的話可能半路就放棄了，因此想在中間加上這一篇踩坑以及解決辦法~
代碼地址

下一篇：引入狀態管理Redux+redux-saga