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