Wrangler pages devでホットリロードしたい

はじめに

Cloudeflare WorkerをNext.jsで開発している中で調べても見つからなかったのでまとめます

問題

cloudflare workerをローカルで開発するときに

$ npm run preview

package.json

    "pages:build": "npx @cloudflare/next-on-pages",
    "preview": "npm run pages:build && wrangler pages dev --d1=DB"

をするとホッとリロードが効かないです。
--hot-reloadなどを試しましたが何故か上手く生きませんでした。

解決方法

nodemonを使ってappを監視して変更があったらnpm run pages:buildをすることで解決しました

$ npm i nodemon
$ npm i concurrently

package.json

    "watch-build": "nodemon --watch app --ext js,jsx,ts,tsx,css,json --exec \"npm run pages:build\" --ignore .vercel/",
    "dev:watch": "concurrently \"npm run watch-build\" \"wrangler pages dev --d1=DB --live-reload\"",

こうすることでホッとリロードは実現できます。

しかし、変更がある度にすべてのビルドをするので超遅いです

おわりに

このような方法をしている人が多かったので、そもそも開発の仕方として違うのかもしれません
ただDBを使うにはWrngler devで起動しないといけないのでわかる方はこめんとくだｓ