前言

🙄目前网络上关于Next.js的动态路由都还是使用路由别名配合服务端编程来实现的，其实Next9已经很好的实现了声明式的动态路由，而月前Next 9又更新了9.2版本，带来了新一波的更新。

动态路由

😂动态路由是9.0更新的东西了，半年多了但是介绍它的文章并不多，这其实是一个很好用的功能，之前Next.js饱受诟病的动态路由只能通过query的方式实现，使得路由都是这样式的：

localhost:3000/post?id=1231728ye818

尽管如此，我们仍然可以使用as的方式，把这种动态路由包裹成param样式的：

localhost:3000/post/123141u82ya2

对于Next.js中的Link和useRouter，我们分别可以这么实现：

<Link href="/blog/[slug]" as="/blog/hello-world"> 
  <a>To Hello World Blog post</a>
</Link>

router.push(
      {
        pathname: "/blogs",
        query: { id: id }
      },
      `blogs/${id}`
    );

但是这样做会导致一些很明显的问题，首先就是在引入动态路由之前，我们的服务器中根本就不存在“blogs/${id}”这样的路由，所以我们还需要在引入服务器进行配置。

这样的体验当然不好，Next.js也知道这个问题，于是他们引入了"[id]"的写法，这样的写法就代表了动态路由，即我们在pages文件下这样新建文件夹和文件：

pages能够取到“blogs/${pid}”的值，而前面的query做法不需要做任何改动，也不需要手动对服务器作出修改。

更多嵌套也是支持的，甚至可以使用延展操作符，这里就不举例了。

Next.js的9.2更新

🔊很多人学Next.js很惊讶的一点是，它原生不支持引入css文件，需要配置插件才可以运行。这一点当然很麻烦，于是在Next.js 9.2版本中，CSS终于回来了。

同时这个更新完全不会导致兼容性问题，前提是你把"@zeit/next-css"相关插件禁用掉：

yarn add next@latest react@latest react-dom@latest

但是要注意的是，为了解决CSS作用域的问题，官方还是建议使用CSS Module的方式做组件样式。

当然你也可以定义全局样式，但要注意在_app.js中引入，同时生产环境中所有的.css都会被合并成一个全局样式文件。

Next.js中的CSS Module就不介绍了，没有做什么定制，和CRA中用法一样。

其他更新还有代码拆分策略以及动态路由的优化，略过。

更新记录

☕我开发是基于9.1做的，所以按照上面的命令更新后只需要注意：

所有以".css"结尾的文件都放去_app.js文件下引入，同时加一段代码：

import App from "next/app";
import "antd/dist/antd.css";
import "../utils/np.css";
...
import "highlight.js/styles/monokai-sublime.css";

export default function MyApp({ Component, pageProps }) {      // 要加的
  return <Component {...pageProps} />;
}

之前为@zeit/next-css做配置的next.config.js直接删除即可。

由于这次9.2宣传的打包优化做的很好，我拿其中一个文件简单做了个对比：

9.1
├ λ /blogs/[pid]                498 kB       1.37 MB

9.2.2
├ λ /blogs/[pid]                335 kB       747 kB

这种优化分块看起来确实是有很大成效的，至少首次加载的Js可以看出减小了50%左右。

个站的更新

🍉前两天其实刚刚更新完，当时就是看了相关更新，想把动态路由做好，顺便修复一点样式错误。结果莫名其妙的失败了，当时以为是版本没更新，以为动态路由是9.2才加的，又不想更新，结果就搁置了，今天一看竟然是9.0的，于是马上纠错打包做镜像。

虽然没做CICD，但是好在基于shell脚本、阿里容器服务和Portainer的部署也挺方便的。总之还是要细心吧，毕竟Next.js用Docker打包还是有点慢的。

小舍简陋，欢迎造访 -> 这里

Next.js 9动态路由的使用与9.2更新记录

前言

动态路由

Next.js的9.2更新

更新记录

个站的更新