Add static files to NextJS hot reloading

I use Next JS to create simple blog sites.

Composition

- public
  - articles
     - [hoge]
        - index.md
- pages
  - article.tsx

Fetch and display public/articles/[hoge]/index.md in article.tsx

Problem

Articles are edited as markdown files in an editor, and checked for display on a local development server. When the markdown file is edited, hot reloading is not performed, so the browser must be manually updated.

Is there any way to add a static file (in the public folder) to monitor hot reloading?

Tried

I added it to next.config.js, as described in Watching Static Content.

const sane = require('sane')
const { WebpackPluginServe: Serve } = require('webpack-plugin-serve')

const serve = new Serve({ static: ['./public/assets'] })
const watcher = sane('./public/assets', { glob: ['**/*.md'] })

serve.on('listening', () => {
  watcher.on('change', (filePath, root, stat) => {
    serve.emit('reload', { source: 'config' })
  })
})

serve.on('close', () => watcher.close())

const nextConfig = {
  reactStrictMode: true,

  webpack: (config, options) => {
    config.plugins.push(serve)
    return config
  },
}

module.exports = nextConfig

ERROR

⬢ wps: webpack-plugin-serve adds HotModuleReplacementPlugin automatically. Please remove it from your config.
PluginExistsError: HotModuleReplacementPlugin exists in the specified configuration.

Additional Tried

delete config.plugins.HotModuleReplacementPlugin

config.plugins.HotModuleReplacementPlugin = serve

But nothing happend.

*I don't understand the basics of webpack, so I could be doing something incorrect.