如何获取NextJS本地开发服务器的URL及端口？

下面是几种可靠的方法来获取当前本地开发服务器的基础URL：

• 环境变量拼接法
  Next.js开发模式下，会自动读取启动时指定的端口（默认3000）并通过process.env.PORT暴露在服务器端。你可以直接拼接出基础URL：

// 服务器端组件/API路由中使用
const baseUrl = `http://localhost:${process.env.PORT || 3000}`;

如果要在客户端组件中使用，需要把端口暴露为客户端可访问的环境变量：在项目根目录的.env.local文件中添加NEXT_PUBLIC_PORT=${PORT}，之后客户端就能通过process.env.NEXT_PUBLIC_PORT获取端口并拼接URL。

• 通过请求头动态获取
  在服务器端的API路由或服务器组件中，可以直接从请求的host头拿到包含端口的主机地址，无需硬编码：

// pages/api/get-base-url.js 或 app/api/get-base-url/route.js
export default function handler(req, res) {
  const baseUrl = `http://${req.headers.host}`;
  res.status(200).json({ baseUrl });
}

前端调用这个API接口，就能获取到当前运行的服务器完整基础URL。

• 自定义启动脚本传递参数
  如果通过自定义npm脚本指定端口（比如next dev -p 4000），也可以在脚本中直接将端口写入环境变量，例如：

{
  "scripts": {
    "dev": "PORT=4000 next dev"
  }
}

之后不管服务器端还是客户端（需配置NEXT_PUBLIC_PORT）都能直接读取该环境变量拼接URL。

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