如何更改 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 端口上啟動：