更改 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"
  }
}

注意：文件中的具体版本号将根据更新而变化。

我们需要更改部分脚本：

将是

"dev": "next dev",

更改为：

"dev": "next dev -p 3001"

在端口 3001 而不是 3000 上运行 Next.js。

现在，当您运行 npm run dev（用于在本地运行开发服务器的命令）时，您将看到它在端口 3001 上运行：

3001端口截图