如何在 next.js 中设置端口

一个应用程序在端口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

133398 次浏览
小开
最佳答案

这对我有用

 "scripts": {
"dev": "next dev -p 8080",
"start": "next start -p 8080",
},
小开

只需要做:

yarn dev -p PORT_YOU_LIKE
小开 
"scripts": {
"dev": "next dev -p 8080", // for dev
"start": "next start -p 8080" // for prod
},
小开

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

在 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 文档。

小开

默认情况下，应用程序将以 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.
小开

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

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

SET PORT=3001 && npm start
小开

通过. 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]);

  1. 然后您可以在 .env中设置一个自定义端口，如下所示: PORT=3002

  2. 更新 package.json中的 dev 命令，使用 dev-server.js脚本，如下所示:

  "scripts": {
"dev": "node dev-server.js"
}
  1. 运行 npm run dev，NextJS 应用程序将在端口3002上启动。

为了生产

  1. 为项目根目录中的 prod 环境创建一个脚本，例如 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]);

  1. 然后您可以在 .env中设置一个自定义端口，如下所示: PORT=3002

  2. 更新 package.json中的 start 命令，使用如下 prod-server.js脚本:

  "scripts": {
"build": "next build",
"start": "node prod-server.js"
}
  1. 运行 npm run start，NextJS 应用程序将在端口3002上启动

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

Github 评论的说明:

有一些托管提供商强制我们使用 server.js/index.js 文件。上述解决方案的好处是它不需要任何附加的依赖关系。

小开

使用 yarn，你可以轻松地传递任何参数:
yarn dev -p 8080或 yarn dev --port=8080。

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

小开

通常，端口是特定于环境的，所以它不应该进入 git 存储库。因此，最好的做法是在 .env.local中定义它，并且可以使用以下开始脚本从 .env.local中读取它:

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

使用 set -a将导出来源环境变量，如果定义了，Next.jS start 脚本将使用 PORT环境变量。注意，此脚本在 Windows 中无法工作。


提交答案