コンテナ内のNext.js（Webpack）でHMRが動作しなくて困った

別の記事（MacでDockerの代わりにpodmanを使ってみた）の動作検証中に、Dockerコンテナでfrourioを動かしていたのですがコードを編集してもHMRが動作しなくて変更が反映されず困りました。
以下、その時の解決手順メモ。

環境

Mac
Next.js 12
frourio
podman 4.2.1

next.config.jsにWebpackのpollを設定

こちらの記事（next.jsでホットリロードされないときの対処法）を参考にwebpack.config.jsを以下のように設定しました。

module.exports = {
  reactStrictMode: true,
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 800,
      aggregateTimeout: 300,
    }
    return config
  },
}

で、変更は反映されるようになったのですがコンテナ側のCPU使用率が死ぬほど高くなってしまいました。
pollの間隔とかの問題ですかね。ディスクアクセスが多くなるとどうしても負荷が高くなります…

docker-compose.ymlに環境変数を設定

CHOKIDAR_USEPOLLING=true

こちらの記事（Docker環境でNextjsのHot Reloadが効かない場合の対策）を参考に環境変数を設定してみました。

compose.yml

  environment:
    - CHOKIDAR_USEPOLLING=true

が、これは特に効果がありませんでした。環境が違うのかな？

WATCHPACK_POLLING=true

こちらの記事（Next.jsでwebpack5使うとHotReloadが動かなかった件）を参考に環境変数を設定してみました。

compose.yml

  environment:
    - WATCHPACK_POLLING=true

変更が反映されるようになり、コンテナ側のCPU使用率も変更前とさほど変わらない状態になりました。
ファイルをwatchする仕組みが違うのでしょうか。詳しくは調べてないですがこちらの環境ではこの設定が適していました。