【问题标题】：How to Set port in next.js如何在 next.js 中设置端口
【发布时间】：2020-05-25 14:24:13
【问题描述】：

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

【问题讨论】：

github.com/zeit/next.js/issues/102

标签： javascript reactjs npm port next.js

【解决方案1】：

这对我有用

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

【讨论】：

没有成功。
如果您在脚本中使用dev next 命令，今天对我来说，这只能通过在下一个命令之后指定，例如next dev -p 8080 和 next start -p 8080 用于 prod 模式，而不是之前这样：next -p 8080 dev。
非常感谢！

【解决方案2】：

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

【讨论】：

这真的不是；该端口不应该被烘焙到启动脚本中。

【解决方案3】：

只需要做：

yarn dev -p PORT_YOU_LIKE

【讨论】：

对于长期价值，请解释为什么此代码解决了 OP 的问题。仅代码的答案不受欢迎。解释有助于未来的访问者学习，并将这些知识应用于他们自己代码中的类似问题。他们也更有可能获得支持。考虑编辑以改进您的答案，并保持 SO Answers 的高质量。感谢您的贡献。
这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review
.env 文件不适用于下一个 js。任何有有效解决方案的人都可以帮助放弃解决方案
我喜欢这种方法。这对我有用，而不是在任何其他文件中更改 PORT。谢谢。

【解决方案4】：

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

【讨论】：

【解决方案5】：

有两种方法：

在您的 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 documentation了解更多信息。

【讨论】：

不错。很好奇为什么这是提到使用 PORT= 变量的唯一答案（我在这里和其他地方看到的）。没有理由将端口号添加到 npm 脚本中。
'PORT' is not recognized as an internal or external command 我正面临着这个

【解决方案6】：

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

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

SET PORT=3001 && npm start

【讨论】：

【解决方案7】：

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

感谢github comment

用于开发

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

然后你可以像这样在.env 中设置一个自定义端口：PORT=3002
更新 package.json 中的 dev 命令以使用 dev-server.js 脚本，如下所示：

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

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

用于生产

在项目根目录中为您的 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]);

然后您可以在.env 中设置自定义端口，如下所示：PORT=3002
更新package.json 中的启动命令以使用prod-server.js 脚本，如下所示：

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

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

dotenv 应该通过npm install dotenv 安装，需要并在脚本中配置，如之前的代码 sn-ps 中所示。

来自github comment的注释：

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

【讨论】：