Next.js 热更新 Markdown 文件变更

最新推荐文章于 2024-06-25 09:48:19 发布

qq_43479892

最新推荐文章于 2024-06-25 09:48:19 发布

阅读量661

点赞数

分类专栏： python 文章标签： javascript flask 开发语言计算机

本文链接：https://blog.csdn.net/qq_43479892/article/details/125457995

版权

本文介绍了在Next.js中，当使用Markdown文件作为内容源时，如何实现Markdown文件变更的热更新。通过监控Markdown文件变化，利用WebSocket通知浏览器更新页面，同时提供数据预览API确保页面内容正确。文章详细阐述了从文件监控、WebSocket通信到页面更新的整个流程。

摘要由CSDN通过智能技术生成

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

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

怎么做

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

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

监控文件更新

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

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

const { watch } = require('node:fs');

function main(){
    watch(process.cwd() + '/\_contents', { recursive: true }, (eventType, filename) => {
        console.log(eventType, filename)
    });
}