如何更改Next.js應用程序端口

了解如何更改在開發模式下運行Next.js的端口

在本地運行時,有人問我如何更改使用Next.js構建的應用程序的HTTP端口。默認情況下,端口為3000,但這是一個常用的端口,也許您正在運行另一個服務。

您如何更改它?

答案在package.json文件存儲在Next.js應用主文件夾中。

默認情況下,文件內容是這樣的:

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

to

"dev": "next dev -p 3001"

to start Next.js on port 3001 instead of 3000.

Now when you run npm run dev, the command used to start the development server locally, you will see it start on port 3001:

Download my free Next.js Handbook


More next tutorials: