博客重生之Next.js
序
对，我又重构博客啦，虽然自从上次更新，也不过才过去一年半。但是这个界面实在用了太久了，有十年了，也太过简陋了。这十年我学了后端，学了前端，做了全栈。博客的技术栈变化也体现了我的技术变化。这里有过往的更新记录。工作中主要用 Vue，但是因为喜欢 React 的简洁，于是萌生了用 Next.js 重构的想法。
开发
翻看 git 提交记录，从 8 月 28 号第一次提交到 9 月 2 号上线，包含周末休息，也才短短五天，完成了前后端和数据迁移。实际写代码时间大概两三天，可谓是效率最高的一次了。
除却博客程序本身的复杂性不算高，界面直接参考了已有项目罗磊的独立博客和Vitepress，也省去不少时间。最大的助力来源于Cursor编辑器，不仅自动补全很好用，遇到不熟悉的功能开发还有复杂的 debug，直接向编辑器描述即可，代码立刻生成，出错或者不可用的情况很少。
界面
界面使用 Next.js/TailwindCSS 开发。第一次看到 TailwindCSS 我是嗤之以鼻的，这一坨坨的 class 都是什么玩意？但是用熟练以后，真香。
- 样式和页面结构结合紧密，注意力不会被分散
- 统一性，网上或者 AI 生成的代码可以直接用
- 不用考虑选择器优先级和覆盖的问题
- 打包以后的文件体积较小
- 编辑器支持很完善
Markdown 渲染使用了 Vitepress 同款的markdown-it，目录也是用 markdown-it 的插件生成的。
还是来个新旧界面的对比吧，增加了封面图，有了更好的响应式支持。
数据
之前数据就存在 PostgreSQL，数据结构变化也不大。我简单写了个 js 脚本，从旧数据库读出并调用 Supabase API 存入新数据库，并对数据做了一些清洗和整理，替换了图片 CDN 地址。评论则从 Disqus 迁移到了自托管的Artalk。官方直接提供了转换工具。至于封面，因为之前的文章没有配图，暂时用了一些无关的图片。
Next.js
其实多数情况下，网站并没有太高的并发，也没有很多的数据。所以开发速度是很多初创企业选择技术栈的一个考查点。用 Next.js 也做过多个网站了，我觉得优点有：
-
很好的 SEO 支持，框架直接提供了 SEO 优化相关的配置项，可以很方便地配置 title、description、keywords、robots.txt、sitemap.txt。这些都几乎不用编码，或者很少编码即可。
-
很好的图片、字体优化，如果使用框架的 Image 组件，就能实现图片格式、尺寸自适应，特别是支持 webp/avif，提供了很好的压缩比。但是压缩的速度较慢，如果使用 Docker 部署，建议把 cache 目录映射出来，这样生成的缓存不会因为重新部署失效。框架可以自动预下载 Google Fonts，对国内部署的服务很友好。
volumes: - /cache/next-blog:/app/.next/cache -
基于目录的路由，有些人不喜欢这一点，我觉得很直观，也很好用。
-
多样化的渲染方式，对服务端渲染支持良好，灵活的静态页面生成，对 SEO 和页面性能有很好的支持。
-
多样化的缓存支持，图片优化缓存、fetch 缓存、页面缓存，缓存的合理使用对提升性能及其重要。
-
完善的 es-lint 规则，开发时，没有设置 alt 属性的图片，没有设置priority、组件不可见等等不利于网站性能或者 SEO 的地方都会在控制台提示，方便开发者及时调整。
当然也有缺点：
- 开发运行时比较慢，这个慢是相对于 Vue3 使用的 Vite 来说的，开发模式时第一次访问网页特别慢，后续还行。
- 需要特别的区分 client 组件和 server 组件，要想利用好 Next.js 的特性需要尽量使用 server 组件，可能要对组件进行计划外的拆分。
- pages 路由和 app 路由两种不同模式带来了一些混乱，对于初学者或者 AI 提示容易弄混出错。
管理界面
这次自己做的这个编辑界面也是比较满意的，最大化地利用了空间，增加了利用 ChatGPT 生成 slug 的功能。主要的代码几乎都是 Cursor 自动生成的，我只要提出问题，指出 bug 即可。特别是处理繁琐的表单，提取可以复用的代码这些工作，AI 做的很好。
你可能看到没有图片上传功能，因为我几乎都是用本地的 Typora 编辑的，图片也是用 Typora 上传的，所以暂时没有这个需求。
最后
有人认为 Next.js 这类的服务端渲染是倒退，我认为没有最好的技术，只有合适的技术。Next.js 可以提供单页面框架的开发体验，还可以使用服务端渲染提高性能，对于博客或者偏展示的网站来说是很好的选择。
从 2021 年开始试用 Copilot，到今天使用的 Cursor，短短 3 年，AI 可谓是进步巨大。我想不出未来的软件开发是什么样的，但是我很看好。