mechill

NextJS & DevContainer環境でホットリロードの対応をする方法

2025/03/13

NextJSの環境をDevContainerにしてみたところ、VSCodeでファイル変更後にブラウザからアクセスしても反映されていなかったため、ホットリロードができるように対応しました。

Webpack の WatchOptions を使う

NextJS&DevContainerの環境でホットリロードを実現するには、 webpack の WatchOptions を使うことで実現できることがわかりました。

WatchOptions の詳細は、ドキュメントを参照していただければと思います。

Webpack の WatchOptions ドキュメント

ドキュメントは下記のページで確認できます。

NextJS でホットリロードの設定を追加

今回、 next.config.ts に追加した内容は下記の通りです。

import type { NextConfig } from "next"

const nextConfig = {
  webpack: (config, context) => {
    config.watchOptions = {
      ignored: /node_modules/,
      poll: 1000,
      aggregateTimeout: 500
    }

    return config
  }
}

module.exports = nextConfig

設定した内容を解説したいと思います。

WatchOptions.ignored で監視対象外のディレクトリを指定

大量のファイルを監視対象にしたいるとCPUやメモリなどのリソースを消費してしまうため、WatchOptions.ignored で node_modules ディレクトリを除外しました。

除外対象は正規表現で指定できるみたいなので、必要に応じて対象のファイルやディレクトリを追加すると良さそうです。

WatchOptions.poll でポーリング間隔を指定

WatchOptions.poll に true を設定するとデフォルトのポーリング間隔が 5007ms になるようなので、今回はもう少し短く 1000ms（1秒） に指定しました。

コーディングの進め方に合わせて変更すると良さそうです。

WatchOptions.aggregateTimeout で再構築の間隔を指定

WatchOptions.aggregateTimeout は最初に変更したファイルのビルドを遅延させることで、ちょっとした変更の連続で発生するビルドの回数を減らすために指定します。

これもミリ秒を指定指定するため、今回は 500ms にしてみました。

ビルドが多いと感じたら少し長めにしても良いかもしれません。

一覧へ戻る