2.0 KiB
The React Framework for Production
Next.js 是 React 框架的框架，属于 React 的上层建设，提供了类似于 Vue 全家桶的打包工具链，路由、状态、服务端渲染全都准备好了，最重要的是它有一个对于博客而言最最重要的功能：服务端渲染/静态增量更新
SSR 和 ISR 是吸引我用 Next.js 的最主要原因，这篇文章主要是记录 YuJianBlog 迁移至 Next.js 的一些障碍
工程化
Next.js 大而全，从 Vite 迁移到 Next 没有花多少的时间，安装 Next.js 移除 Vite 同时修改 package.json 中的 scripts 就已经完成了依赖方面的迁移，然后就可以和 React Router 说再见了。
对于客户端状态管理，博客秉承“小而美”的信念，是不使用客户端状态管理的，而服务端状态管理用的是 ReactQuery 的方案，而 Nextjs 是提供了一些用于请求数据的 API，迁移 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) 就行了，缺点就是丑