如何使用nrwl/next将NextJS应用部署到0.0.0.0:3000而非localhost:3000

问题原因 #

:::3000 是IPv6协议下的通配监听地址，默认状态下该地址已经兼容IPv4的0.0.0.0请求，绝大多数场景下无需额外配置就可以通过局域网IPv4地址正常访问服务。出现参数不生效的问题，是因为NextJS开发服务器默认优先启用IPv6监听，即使指定了0.0.0.0的host，只要没有关闭IPv6选项，就会显示为:::3000的监听形式。

解决方法 #

如果确实需要强制使用IPv4的0.0.0.0监听，可以选择以下任意一种方式配置：

• 方式1：修改nx项目的运行配置（永久生效）
  找到对应NextJS应用目录下的project.json文件，定位到 targets -> serve -> options 节点，新增两个配置项：

  {
    "targets": {
      "serve": {
        "options": {
          "host": "0.0.0.0",
          "disableIPv6": true,
          "port": 3000
        }
      }
    }
  }
  

  配置完成后直接运行nx serve career即可生效。
• 方式2：运行命令时直接透传参数（临时生效）
  直接在原运行命令中添加NextJS的disableIPv6参数即可，nx会自动将参数透传给底层的NextJS服务：

  nx serve career --port=3000 --host=0.0.0.0 --disableIPv6
  

• 方式3：在NextJS配置文件中设置
  打开项目根目录的next.config.js，新增服务监听相关配置：

  module.exports = {
    // 其他原有配置保留
    serverOptions: {
      host: '0.0.0.0',
      port: 3000,
      disableIPv6: true
    }
  }
  

配置完成后重启服务，再用端口查看命令检查，就会显示0.0.0.0:3000的IPv4监听记录。

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