如何在Next.js中获取启动命令里-p参数的取值？

我的Next.js应用通过以下命令启动：

yarn dev

对应的package.json脚本定义如下：

{
   "scripts": {
     "dev": "next dev -p 4000"
   }
}

问题是：通过这种方式启动时process.env.PORT并未被设置，怎么从-p选项里拿到4000这个值？

现有如下函数，需要把其中的????替换成-p参数的值，没设置的话默认用3000：

const getBaseUrl = () => {
  if (typeof window !== 'undefined') return '';  // 浏览器端使用相对路径

  // 如何将????替换为-p参数的值，未设置则默认用3000

  return 'http://localhost:????';  // 开发环境SSR需要使用localhost
}

几种可行的解决方法 #

方法1：直接解析命令行参数 #

Node.js的process.argv会包含启动时的所有命令行参数，我们可以从中提取-p后面的端口：

const getBaseUrl = () => {
  if (typeof window !== 'undefined') return '';  // 浏览器端使用相对路径

  // 从命令行参数中提取-p对应的端口
  const argv = process.argv;
  const portIndex = argv.indexOf('-p');
  const port = portIndex !== -1 ? argv[portIndex + 1] : '3000';

  return `http://localhost:${port}`;  // 开发环境SSR需要使用localhost
}

要是你习惯用--port替代-p（Next.js也支持这个写法），把indexOf('-p')改成indexOf('--port')就行。

方法2：读取package.json里的脚本配置 #

如果端口是固定写在package.json的scripts里，也可以直接读这个文件解析端口：

const fs = require('fs');
const path = require('path');

const getBaseUrl = () => {
  if (typeof window !== 'undefined') return '';  // 浏览器端使用相对路径

  // 读取package.json解析端口
  let port = '3000';
  try {
    const packageJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json'), 'utf8'));
    const devScript = packageJson.scripts?.dev;
    if (devScript) {
      const portMatch = devScript.match(/-p\s+(\d+)/);
      if (portMatch) {
        port = portMatch[1];
      }
    }
  } catch (err) {
    // 读取失败就用默认端口
  }

  return `http://localhost:${port}`;  // 开发环境SSR需要使用localhost
}

不过这种方法有个局限：要是启动时手动改了端口（比如yarn dev -p 5000），就拿不到实际用的端口了，所以更推荐第一种方法。

方法3：提前设置环境变量 #

换个思路，在启动脚本里先设置环境变量，再启动Next.js：
修改package.json的脚本：

{
   "scripts": {
     "dev": "PORT=4000 next dev -p $PORT"
   }
}

这样process.env.PORT就会被设为4000，函数里直接用就行：

const getBaseUrl = () => {
  if (typeof window !== 'undefined') return '';  // 浏览器端使用相对路径

  const port = process.env.PORT || '3000';

  return `http://localhost:${port}`;  // 开发环境SSR需要使用localhost
}

Windows系统下要改成set PORT=4000 && next dev -p %PORT%，想跨平台的话可以装个cross-env包：

yarn add cross-env -D

然后脚本改成：

{
   "scripts": {
     "dev": "cross-env PORT=4000 next dev -p $PORT"
   }
}

内容的提问来源于stack exchange，提问作者Yanick Rochon