如何实现Next.js中Markdown文件变更的热更新功能？

本文共计1334个文字，预计阅读时间需要6分钟。

Next.js 提供了 Fast-Refresh 功能，为 React 组件的编辑提供即时反馈。然而，当使用 Markdown 文件提供网站内容时，由于 Markdown 不是 React 组件，热更新将失效。如何解决？

Next.js 提供了 Fast-Refresh 能力，它可以为您对 React 组件所做的编辑提供即时反馈。
但是，当你通过 Markdown 文件提供网站内容时，由于 Markdown 不是 React 组件，热更新将失效。

怎么做

解决该问题可从以下几方面思考：

1. 服务器如何监控文件更新
2. 服务器如何通知浏览器
3. 浏览器如何更新页面
4. 如何拿到最新的 Markdown 内容
5. 如何与 Next.js 开发服务器一起启动

监控文件更新

约定： markdown 文件存放在 Next.js 项目根目录下的 _contents/ 中

通过 node:fs.watch 模块递归的监控 _contents 目录，当文件发生变更，触发 listener 执行。
新建文件 scripts/watch.js 监控 _contents 目录。