Next.js 配置远程访问：无需改代码，仅通过命令行实现

Next.js 配置远程访问：无需改代码，仅通过命令行实现

在 Ubuntu 服务器部署 Next.js 前端项目时，很多开发者会遇到「本地能访问但远程无法访问」的问题，核心原因是 Next.js 默认仅监听本地 127.0.0.1 地址。本文将介绍无需修改项目代码，仅通过调整 npm 启动命令的方式，实现 Next.js 项目的远程访问。

一、问题背景

在执行 nohup npm run dev -- --host 0.0.0.0 --port 3000 时出现报错：

error: unknown option '--host'

这是因为 Next.js 的 next dev 命令不支持 --host/--port 这类参数（该参数仅适用于 Vue/React 开发服务器），需要用 Next.js 专属的配置方式。

二、核心原理

Next.js 支持通过环境变量 HOST 和 PORT 指定监听地址和端口：

• HOST=0.0.0.0：让服务监听服务器的所有网络接口（而非仅本地）
• PORT=3000：指定服务运行的端口（可自定义）

三、具体实现步骤

1. 修改 package.json 启动脚本

无需改动项目代码，仅修改 package.json 中的 scripts 字段，添加环境变量配置：

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    // 核心修改：添加 HOST=0.0.0.0 PORT=3000
    "dev": "HOST=0.0.0.0 PORT=3000 next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  // 其余依赖配置不变...
}

2. 重启后台运行的服务

步骤1：停止原有报错进程

# 查找 Next.js 相关进程
ps aux | grep next

# 杀死进程（替换为实际查到的进程ID）
kill -9 [进程ID]

步骤2：重新后台启动服务

# 进入项目目录
cd ~/apps/yunqibao/frontend

# 后台启动并输出日志到 app.log
nohup npm run dev > app.log 2>&1 &

步骤3：查看启动日志验证

# 实时查看日志
tail -f app.log

启动成功会显示如下日志：

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

3. 开放服务器端口（关键）

确保 Ubuntu 防火墙开放 3000 端口：

# 开放 3000 端口（TCP）
sudo ufw allow 3000/tcp

# 重启防火墙生效
sudo ufw reload

# 查看防火墙状态
sudo ufw status

注意：如果是云服务器（阿里云/腾讯云等），需在控制台「安全组」中额外放行 3000 端口。

四、验证远程访问

在本地浏览器或另一台机器执行：

# 替换为你的服务器 IP
curl http://[服务器IP]:3000

或直接访问浏览器地址：http://[服务器IP]:3000，能正常加载页面即配置成功。

五、常见问题解答

Q1：是否需要重新执行 npm install？

不需要！仅修改启动脚本（属于「运行方式」），未新增/修改依赖包，因此无需重装依赖。

Q2：Next.js 生产环境（start 命令）如何配置？

生产环境启动命令同样支持环境变量：

"start": "HOST=0.0.0.0 PORT=3000 next start"

Q3：端口被占用怎么办？

# 查看 3000 端口占用情况
sudo lsof -i:3000

# 杀死占用进程
sudo kill -9 [进程ID]

# 或更换端口（如 3001）
"dev": "HOST=0.0.0.0 PORT=3001 next dev"

六、总结

1. Next.js 不支持 --host 参数，需通过 HOST=0.0.0.0 PORT=3000 环境变量配置远程访问；
2. 仅修改 package.json 的 scripts 字段，无需侵入项目代码；
3. 核心关键点：服务监听 0.0.0.0 + 服务器/云安全组开放对应端口；
4. 无需重装依赖，修改脚本后重启服务即可生效。