Docker中NextJS项目执行npm run dev无法自动重载问题求助

• 配置NextJS HMR参数
  在项目根目录创建.env.local文件，添加NEXT_HMR_HOST=gamersplane.local；或者修改next.config.js，手动指定WebSocket地址：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    webpack: (config, { dev }) => {
      if (dev) {
        config.devServer.client.webSocketURL = 'ws://gamersplane.local/_next/webpack-hmr';
      }
      return config;
    },
  };
  
  module.exports = nextConfig;
  

• 检查Docker端口映射
  确保容器的3000端口（NextJS默认开发端口）和宿主机3000端口绑定，WebSocket依赖这个端口传输热重载信号。比如docker-compose配置如下：

  services:
    app:
      build: ./
      ports:
        - "3000:3000"
      volumes:
        - .:/app
        - /app/node_modules
  

• 修改dev命令绑定所有接口
  给package.json里的dev命令加上--hostname 0.0.0.0参数，让NextJS在容器内监听所有网络接口，避免HMR服务只绑定容器内部localhost导致浏览器无法连接：

  "scripts": {
    "dev": "next dev --hostname 0.0.0.0"
  }
  

• 核对WebSocket地址
  确认浏览器控制台里的WebSocket地址ws://gamersplane.local/_next/webpack-hmr没有端口错误，如果Docker映射了非3000端口，要同步修改地址里的端口数值。

内容的提问来源于stack exchange，提问作者Rohit