如何改变Next.js应用程序的端口

了解如何改变Next.js在开发模式下的运行端口

有人问我，在本地运行时，如何改变使用Next.js构建的应用程序的HTTP端口。默认的端口是3000 ，但这是一个常用的端口，也许你有其他服务在上面运行。

你怎么能改变它呢？

答案是存储在Next.js应用程序主文件夹中的package.json 文件。

默认情况下，该文件内容是这样的。

{
  "name": "learn-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.3.5",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}

注意：在你的情况下，确切的包号会有所不同，因为它们会被更新。

你需要改变的是scripts 部分。

改变。

"dev": "next dev",

至

"dev": "next dev -p 3001"

来启动Next.js的端口3001 ，而不是3000 。

现在，当你运行npm run dev ，即用于在本地启动开发服务器的命令时，你会看到它在端口3001 。