如何在 next.js 中设置端口

Question

一个应用程序在端口 3000 上运行，我想在默认端口的不同端口上运行另一个应用程序。我如何在 React Next.js 中改变它。我的package.js脚本是

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },

和启动脚本命令是 npm run dev

Answer 1

这对我有用，谢谢@evolutionxbox

 "scripts": { 
       "dev": "next -p 8080" 
},

Answer 2

"scripts": {
    "dev": "next dev -p 8080", // for dev 
    "start": "next start -p 8080" // for prod
},

Answer 3

使用yarn，pnpm您可以轻松传递任何参数：
yarn dev -p 8080或yarn dev --port=8080

使用npmusing--传递参数：
npm run dev -- -p 8080

Answer 4

只需要做：

yarn dev -p PORT_YOU_LIKE

Answer 5

通过 .env 文件使用环境变量的解决方法

感谢这个github评论

为了发展

1. 在项目根目录中为您的开发环境创建一个脚本，例如dev-server.js

// dev-server.js
require('dotenv').config(); // require dotenv
const cli = require('next/dist/cli/next-dev');

cli.nextDev(['-p', process.env.PORT || 3000]);

2. 然后你可以像这样设置自定义端口.env：PORT=3002

3. 更新您的 dev 命令package.json以使用dev-server.js如下脚本：

  "scripts": {
    "dev": "node dev-server.js"
  }

4. 运行npm run dev，NextJS 应用程序将在端口 3002 上启动。

用于生产

1. 在项目根目录中为您的产品环境创建一个脚本，例如prod-server.js

// prod-server.js
require('dotenv').config(); // require dotenv
const cli = require('next/dist/cli/next-start');

cli.nextStart(['-p', process.env.PORT || 3000]);

2. 然后你可以像这样设置自定义端口.env：PORT=3002

3. 更新您的启动命令package.json以使用prod-server.js如下脚本：

  "scripts": {
    "build": "next build",
    "start": "node prod-server.js"
  }

4. 运行npm run start，NextJS 应用程序将在端口 3002 上启动。（不要忘记使用 之前构建项目npm run build）

dotenv应通过npm install dotenv在脚本中安装、必需并配置，如前面的代码片段所示。

github 评论中的注释：

有一些托管提供商只是强制我们拥有 server.js/index.js 文件。上述解决方案的好处是它不需要任何额外的依赖。

Answer 6

有两种方法可以做到这一点：

在您的package.json文件中，添加-p 8080到 dev/start 脚本以在端口 8080 上启动服务器：

  "scripts": {
    "dev": "next -p 8080",
    "build": "next build",
    "profile-build": "next build --profile",
    "start": "next start -p 8080"
  }

或者，如果您不想在文件中对此进行硬编码package.json，则可以使用 ENV 变量 PORT 启动脚本。

PORT=8080 npm run dev

请访问vercel 文档以获取更多信息。

Answer 7

通常，端口是特定于环境的，因此它不应该进入 git 存储库。因此，最佳实践是在 中定义它.env.local，并且可以使用以下启动脚本从那里读取它：

// package.json
"scripts": {
  "start": "[ -e .env.local ] && set -a && . ./.env.local; next start",
},

使用set -a将导出源环境变量，并且 Next.JS 启动脚本将使用该PORT环境变量（如果已定义）。请注意，此脚本在 Windows 中不起作用。

Answer 8

默认情况下，应用程序将从 http://localhost:3000 开始。可以使用 -p 更改默认端口，如下所示：

 npx next dev -p 4000

或者使用 PORT 环境变量：

PORT=4000 npx next dev

#注意我使用的是 npx 而不是 npm

您还可以将主机名设置为与默认值 0.0.0.0 不同，这对于使应用程序可用于网络上的其他设备非常有用。可以使用 -H 更改默认主机名，如下所示：

 npx next dev -H 192.168.1.2

如果您收到端口已被使用的错误，您可以在 Windows 上解决此问题的方法是

Go to the Task Manager.

Scroll and find a task process named. Node.js: Server-side

End this particular task.

Answer 9

在 npm 脚本中设置端口号根本不是一个好主意。

从终端，您可以使用以下命令传递端口号

SET PORT=3001 && npm start