/

如何更改 Next.js 應用的端口

如何更改 Next.js 應用的端口

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

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

如何更改它呢?

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

默認情況下,文件內容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"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 部分。

將:

1
"dev": "next dev",

更改為

1
"dev": "next dev -p 3001"

以將 Next.js 啟動在 3001 端口而不是 3000 端口。

現在,當您運行 npm run dev,這個命令用於在本地啟動開發服務器,您將看到它在 3001 端口上啟動: