博客重生之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可谓是进步巨大。我想不出未来的软件开发是什么样的,但是我很看好。