如何在Next.js中连接运行在不同端口的后端服务？

下面提供几种实用的解决方案，帮你连接运行在8000端口的后端服务：

方法1：直接使用完整后端URL #

最简单的方式是直接在fetch中指定后端的完整地址，替代相对路径：

fetch('http://localhost:8000/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

注意：开发环境用localhost:8000没问题，生产环境需要替换为后端的实际域名。

方法2：使用环境变量（推荐） #

为了避免硬写地址、方便切换开发/生产环境，用Next.js的环境变量管理后端地址：

1. 在项目根目录创建.env.local文件，添加：

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

（前缀NEXT_PUBLIC_是必须的，确保前端代码能访问到该变量）
2. 在代码中引用环境变量：

fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/data`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

后续切换环境时，只需修改.env.local中的地址即可，无需改动业务代码。

方法3：用Next.js API路由做代理（适合生产环境） #

如果不想在前端暴露后端地址，或存在跨域问题，可以通过Next.js的API路由作为中间层转发请求：

1. 在pages/api目录下创建proxy-data.js文件：

export default async function handler(req, res) {
  const backendUrl = 'http://localhost:8000/api/data';
  try {
    const response = await fetch(backendUrl, {
      method: req.method,
      headers: req.headers,
      body: req.body
    });
    const data = await response.json();
    res.status(response.status).json(data);
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch data from backend' });
  }
}

2. 前端页面请求这个本地API路由：

fetch('/api/proxy-data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

这种方式前端始终请求自身的3000端口，由Next.js转发到后端8000端口，既避免跨域，也隐藏了后端真实地址。

额外注意事项 #

• 确保后端服务器配置了CORS（比如Express项目可以用cors中间件），否则会出现跨域错误。
• 生产环境部署时，记得将NEXT_PUBLIC_BACKEND_URL替换为后端的实际域名（如https://your-backend-domain.com）。

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