---
title: "博客重生之Next.js"
url: "https://lerry.me/post/2024/09/blog-rebirth-with-nextjs"
date: 2024-08-31T17:14:56.778Z
updated: 2026-08-25T10:39:56.538Z
tags:
  - "博客"
  - "Tailwind CSS"
  - "Next.js"
  - "React"
language: zh-CN
---

# 博客重生之Next.js

## 序

对，我又重构博客啦，虽然自从上次更新，也不过才过去一年半。但是这个界面实在用了太久了，有十年了，也太过简陋了。这十年我学了后端，学了前端，做了全栈。博客的技术栈变化也体现了我的技术变化。这里有过往的[更新记录](https://lerry.me/post/2018/11/blog-changelog)。工作中主要用 Vue，但是因为喜欢 React 的简洁，于是萌生了用 Next.js 重构的想法。

## 开发

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

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

## 界面

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

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

Markdown 渲染使用了 Vitepress 同款的[markdown-it](https://github.com/markdown-it/markdown-it)，目录也是用 markdown-it 的插件生成的。

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

![new](https://r2.lerry.me/next-blog/uploads/202409/5f378adb50eb9aec043f87dda4d7a3b2.png)

![old blog](https://r2.lerry.me/next-blog/uploads/202409/4cf64ce7dc0fc3f073c0d2e5ca310983.png)

## 数据

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

## Next.js

其实多数情况下，网站并没有太高的并发，也没有很多的数据。所以开发速度是很多初创企业选择技术栈的一个考查点。用 Next.js 也做过多个网站了，我觉得优点有：

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

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

   ```yaml
   volumes:
     - /cache/next-blog:/app/.next/cache
   ```

3. 基于目录的路由，有些人不喜欢这一点，我觉得很直观，也很好用。

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

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

6. 完善的 es-lint 规则，开发时，没有设置 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](https://r2.lerry.me/next-blog/uploads/202409/65e0c1de36001ce061e0da525874a291.png)

## 最后

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

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