博客重生之Next.js
序
对，我又重构博客啦，虽然自从上次更新，也不过才过去一年半。但是这个界面实在用了太久了，有十年了，也太过简陋了。这十年我学了后端，学了前端，做了全栈。博客的技术栈变化也体现了我的技术变化。这里有过往的更新记录。做前端以来，我主要用Vue，直到最近才开始系统地学习React，帮亲戚做了个外贸网站练手，然后参加了黑客马拉松。React.js/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
其实多数情况下，网站并没有太高的并发，也没有很多的数据。所以开发速度是很多初创企业选择技术栈的一个考查点。三个网站做下来，我觉得优点有：
-
很好的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缓存、页面缓存，缓存的合理使用对提升性能及其重要。
-
很好的开发提示，开发时，没有设置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可谓是进步巨大。我想不出未来的软件开发是什么样的，但是我很看好。