博客重生之Next.js

对,我又重构博客啦,虽然自从上次更新,也不过才过去一年半。但是这个界面实在用了太久了,有十年了,也太过简陋了。这十年我学了后端,学了前端,做了全栈。博客的技术栈变化也体现了我的技术变化。这里有过往的更新记录。做前端以来,我主要用Vue,直到最近才开始系统地学习React,帮亲戚做了个外贸网站练手,然后参加了黑客马拉松。React.js/Next.js越用越熟练,越用越喜欢。于是萌生了重构的想法。

开发

翻看git提交记录,从8月28号第一次提交到9月2号上线,包含周末休息,也才短短五天,完成了前后端和数据迁移。实际写代码时间大概两三天,可谓是效率最高的一次了。

除却博客程序本身的复杂性不算高,界面直接参考了已有项目罗磊的独立博客Vitepress,也省去不少时间。最大的助力来源于Cursor编辑器,不仅自动补全很好用,遇到不熟悉的功能开发还有复杂的debug,直接向编辑器描述即可,代码立刻生成,出错或者不可用的情况很少。

界面

界面使用Next.js/TailwindCSS开发。第一次看到TailwindCSS我是嗤之以鼻的,这一坨坨的class都是什么玩意?但是用熟练以后,真香。

  1. 样式和页面结构结合紧密,注意力不会被分散
  2. 统一性,网上或者AI生成的代码可以直接用
  3. 不用考虑选择器优先级和覆盖的问题
  4. 打包以后的文件体积较小
  5. 编辑器支持很完善

Markdown渲染使用了Vitepress同款的markdown-it,目录也是用markdown-it的插件生成的。

还是来个新旧界面的对比吧,增加了封面图,有了更好的响应式支持。

new

old blog

数据

之前数据就存在PostgreSQL,数据结构变化也不大。我简单写了个js脚本,从旧数据库读出并调用Supabase API存入新数据库,并对数据做了一些清洗和整理,替换了图片CDN地址。评论则从Disqus迁移到了自托管的Artalk。官方直接提供了转换工具。至于封面,因为之前的文章没有配图,暂时用了一些无关的图片。

Next.js

其实多数情况下,网站并没有太高的并发,也没有很多的数据。所以开发速度是很多初创企业选择技术栈的一个考查点。三个网站做下来,我觉得优点有:

  1. 很好的SEO支持,框架直接提供了SEO优化相关的配置项,可以很方便地配置title、description、keywords、robots.txt、sitemap.txt。这些都几乎不用编码,或者很少编码即可。

  2. 很好的图片、字体优化,如果使用框架的Image组件,就能实现图片格式、尺寸自适应,特别是支持webp/avif,提供了很好的压缩比。但是压缩的速度较慢,如果使用Docker部署,建议把cache目录映射出来,这样生成的缓存不会因为重新部署失效。框架可以自动预下载Google Fonts,对国内部署的服务很友好。

    volumes:
          - /cache/next-blog:/app/.next/cache
  3. 基于目录的路由,有些人不喜欢这一点,我觉得很直观,也很好用。

  4. 多样化的渲染方式,对服务端渲染支持良好,灵活的静态页面生成,对SEO和页面性能有很好的支持。

  5. 多样化的缓存支持,图片优化缓存、fetch缓存、页面缓存,缓存的合理使用对提升性能及其重要。

  6. 很好的开发提示,开发时,没有设置alt属性的图片,没有设置priority、组件不可见等等可以优化的地方都会在控制台提示,方便你做出有利于SEO的网站。

当然也有缺点:

  1. 开发运行时极其的慢,这个慢是相对于Vue3使用的Vite来说的,开发模式时第一次访问网页特别慢,后续还行。
  2. 需要特别的区分client组件和server组件,要想利用好Next.js的特性需要尽量使用server组件,可能要对组件进行计划外的拆分。
  3. pages路由和app路由两种不同模式带来了一些混乱,对于初学者或者AI提示容易弄混出错。

管理界面

这次自己做的这个编辑界面也是比较满意的,最大化地利用了空间,增加了利用ChatGPT生成slug的功能。主要的代码几乎都是Cursor自动生成的,我只要提出问题,指出bug即可。特别是处理繁琐的表单,提取可以复用的代码这些工作,AI做的很好。
你可能看到没有图片上传功能,因为我几乎都是用本地的Typora编辑的,图片也是用Typora上传的,所以暂时没有这个需求。

screenshot-20240902-171037

最后

有人认为Next.js这类的服务端渲染是倒退,我认为没有最好的技术,只有合适的技术。Next.js可以提供单页面框架的开发体验,还可以使用服务端渲染提高性能,对于博客或者偏展示的网站来说是很好的选择。

从2021年开始试用Copilot,到今天使用的Cursor,短短3年,AI可谓是进步巨大。我想不出未来的软件开发是什么样的,但是我很看好。