Next.js/React前端npm run dev修改服务器地址与URL问题

问题说明 #

我正在为Web应用搭建Flask后端与React/Next.js前端，但远程服务器上的前端无法正常按预期启动。本地执行npm run dev时显示：started server on 0.0.0.0:3000, url: http://localhost:3000；在Linux服务器执行时显示：started server on [::]:3000, url: http://localhost:3000。我希望服务器绑定到0.0.0.0:3000并可通过该地址访问，尝试过npm run dev --hostname 0.0.0.0和HOST='0.0.0.0' npm run dev均无效。

服务器信息：

NAME="Red Hat Enterprise Linux"
VERSION="8.4 (Ootpa)"
ID="rhel"
ID_LIKE="fedora"
VERSION_ID="8.4"
PLATFORM_ID="platform:el8"
PRETTY_NAME="Red Hat Enterprise Linux 8.4 (Ootpa)"
ANSI_COLOR="0;31"
CPE_NAME="cpe:/o:redhat:enterprise_linux:8.4:GA"
HOME_URL="https://www.redhat.com/"
DOCUMENTATION_URL="https://access.redhat.com/documentation/red_hat_enterprise_linux/8/"
BUG_REPORT_URL="https://bugzilla.redhat.com/"
REDHAT_BUGZILLA_PRODUCT="Red Hat Enterprise Linux 8"
REDHAT_BUGZILLA_PRODUCT_VERSION=8.4
REDHAT_SUPPORT_PRODUCT="Red Hat Enterprise Linux"
REDHAT_SUPPORT_PRODUCT_VERSION="8.4"

解决方法 #

1. 调整环境变量执行命令 #

针对Next.js的环境变量配置规则，尝试以下无引号的命令格式：

HOST=0.0.0.0 PORT=3000 npm run dev

若仍无效，改用NEXT_HOST变量（部分版本的Next.js支持该参数）：

NEXT_HOST=0.0.0.0 npm run dev

2. 修改package.json启动脚本 #

直接在项目的package.json中把主机参数写死到dev命令里：

{
  "scripts": {
    "dev": "next dev -H 0.0.0.0 -p 3000"
  }
}

保存后执行npm run dev，启动时会自动绑定0.0.0.0:3000。

3. 开放服务器防火墙端口 #

RHEL8的防火墙默认会拦截外部对3000端口的访问，需要手动开放：

sudo firewall-cmd --add-port=3000/tcp --permanent
sudo firewall-cmd --reload

验证端口是否开放：

firewall-cmd --list-ports

4. 升级Next.js版本 #

如果是较旧的Next.js版本，-H参数可能不兼容，尝试升级到稳定版：

npm install next@latest

验证结果 #

执行启动命令后，若输出started server on 0.0.0.0:3000, url: http://localhost:3000，则说明绑定成功，此时可通过服务器公网IP加3000端口访问前端。

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