>The React Framework  for Production

Next.js 是 React 框架的框架，属于 React 的上层建设，提供了类似于 Vue 全家桶的打包工具链，路由状态服务端渲染全都准备好了，最重要的是它有一个对于博客而言最最重要的功能：服务端渲染

SSR 是吸引我用 Next.js 的最主要原因，这篇文章主要是记录 YuJianBlog 迁移至 Next.js 的一些障碍

## 工程化

Next.js 大而全，从 Vite 迁移到 Next 没有花多少的时间，安装 Next.js 移除 Vite 同时修改 `package.json` 中的 scripts 就完成了依赖的迁移，然后就可以和 React Router 说再见了。

对于客户端状态管理，博客秉承“小而美”的信念，是不使用客户端状态管理的，而服务端状态管理用的是 ReactQuery 的方案，现在迁移至 Next.js 也可以一并去掉了，对 package.json 做精简，总会有一种强迫症的舒服感觉 = =

这里有一个比较大的改动，因为在原来的技术栈中，对于样式使用的是 less，并且样式命名用 BEM 做限制，不使用 css module，但是 Next.js 对于 less 需要做额外的配置，但是对于 scss 就很方便，所以我花了一点时间把 less 全部改成了 scss 并且使用 css module，都是体力活动

## 路由

前面说到 Next.js 是有自己的路由能力，所以我们这里需要对路由做一些调整，Next.js 的路由是基于文件系统的路由（file-system based），也就是说它会自动的根据 pages 文件夹下的目录生成路由，因为原项目中我的页面本来就放在 pages 下，所以等于基本没有做什么调整就完成了

对于路由还有一个重要的地方，那就是动态路由，使用路由传参的场景是很常见的，那么 Next.js 要怎么实现动态路由呢？也不用做什么改动，只需要把动态路由的页面的文件名改成 [id].tsx ([id].jsx) 就行了，缺点就是丑