如何解决NextJS运行时出现端口已被占用的报错问题？

普通React项目（通常基于Create React App搭建）的启动工具react-scripts专门针对纯开发场景做了优化，内置端口冲突检测与询问切换逻辑。而NextJS的启动逻辑同时适配开发、生产两类场景，默认优先遵循端口配置约定，避免非预期的端口自动变更导致生产环境的代理、域名配置失效，因此检测到端口被占用时会直接报错退出。

• 启动时临时指定端口
  启动命令后加端口参数即可，不同包管理器对应命令如下：

  # npm
  npm run dev -- -p 3001
  # yarn
  yarn dev -p 3001
  # pnpm
  pnpm dev -p 3001
  

  上述命令会将NextJS应用启动在3001端口，你也可以换成任意未被占用的端口号。

• 永久修改默认启动端口
  打开项目根目录的package.json文件，修改scripts字段中的dev命令：

  {
    "scripts": {
      "dev": "next dev -p 3001",
      // 其他scripts配置保持不变
    }
  }
  

  修改后每次执行启动命令都会默认使用3001端口启动。

• 通过环境变量指定端口
  也可以通过设置PORT环境变量指定启动端口，不同系统对应命令：

  # Linux/macOS
  PORT=3001 npm run dev
  
  # Windows cmd
  set PORT=3001 && npm run dev
  
  # Windows PowerShell
  $env:PORT=3001; npm run dev
  

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