【Next.js】ホットリロードを有効にしてみる

下記の記事で作成したDocker上のNext.jsのホットリロードを有効にしてみます。

開発環境

• OS:Windows11
• Docker Desktopインストール済み
• VSCodeインストール済み

ホットリロードの設定

next.config.tsを変更

src\next.config.tsを開いて変更。

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

    return config
  }
};

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

    return config
  }
};

package.jsonを変更

src\package.jsonを開いて下記の内容を追記。

"dev": "next dev --webpack",

"dev": "next dev --webpack",

サーバーを起動

docker compose up -d

docker compose up -d

ホットリロードを試してみる

下記のURLにアクセス。
http://localhost:3000/

src\src\app\page.tsxを開いて適当に修正。

再度アクセスすると変更が反映されているはず。

以上になります。
お読み頂き、ありがとうございました。