You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
>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) 就行了，缺点就是丑
|
