Next.js 13.3.0启动后localhost:3000无法连接及端口修改求助

一、修改项目运行端口到4000的方法 #

有三种简单方式可以修改Next.js dev服务器的端口：

• 命令行临时指定：启动服务时直接追加端口参数

  npm run dev -- -p 4000
  # 或者直接用next命令
  npx next dev -p 4000
  

• 修改package.json脚本：把dev命令固定为指定端口，以后npm run dev自动用4000端口
  在package.json的scripts字段中修改：

  "scripts": {
    "dev": "next dev -p 4000",
    "build": "next build",
    "start": "next start"
  }
  

• 使用环境变量：在项目根目录创建.env.local文件，添加端口配置，重启服务后生效

  PORT=4000
  

二、排查localhost:3000拒绝连接的问题 #

既然已经确认3000端口未被占用，按以下步骤排查：

• 检查终端启动日志：启动npm run dev后，看终端是否有编译错误、依赖缺失等报错——如果服务启动失败，不会监听端口，自然无法连接
• 替换localhost为127.0.0.1访问：尝试访问127.0.0.1:3000，排除localhost的DNS解析问题
• 检查hosts文件配置：
  • Windows：打开C:\Windows\System32\drivers\etc\hosts，确认存在127.0.0.1 localhost的映射条目
  • Mac/Linux：打开/etc/hosts，确认同样的映射关系，没有的话手动添加
• 临时关闭防火墙/杀毒软件：部分安全软件会拦截本地端口的连接，关闭后重试访问
• 清除Next.js缓存：删除项目根目录下的.next文件夹，然后重新执行npm run dev
• 重装依赖：删除node_modules文件夹和package-lock.json文件，执行npm install后再启动服务

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