修改Next.js应用程序端口号

本文俺将跟大家介绍如何更改Next.js在开发模式下运行的端口号。

有人问俺如何更改使用Next.js构建的应用程序的HTTP端口？

当你在本地运行它，默认情况下，端口是3000，但这是一个常用的端口，并且可能在该端口上运行另一个服务。

你怎么能改变它呢?

答案就在package.json文件存储在Next.js应用主文件夹中。

默认情况下，package文件内容如下:

{
  "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"

在端口3001而不是3000上启动Next.js。

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