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

Next.js 踩坑入门系列

填坑

第一坑 - 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