Next.js服务端组件调用API路由遇Vercel部署问题求助

请提供需要进行Markdown格式化的具体内容，我会按照指定规则为你处理。

若你是需要处理之前提到的Next.js部署问题，以下是符合要求的Markdown格式回答：

核心问题原因 #

服务端组件中直接用fetch('/api/products')报错，是因为Next.js在服务端执行时需要完整绝对URL；硬编码localhost:3000在Vercel环境无效，因为容器不会监听本地端口，导致连接被拒绝。

解决方案 #

方案1：利用Next.js内置headers()获取当前主机（推荐） #

在服务端组件中通过请求头获取host字段，拼接成完整API地址：

import { headers } from 'next/headers';

async function getProducts() {
  const headersList = headers();
  const host = headersList.get('host');
  const protocol = process.env.NODE_ENV === 'production' ? 'https' : 'http';
  const res = await fetch(`${protocol}://${host}/api/products`);
  return res.json();
}

• 本地开发时host自动为localhost:3000，Vercel部署后自动适配项目域名，无需额外配置。

方案2：配置环境变量区分环境 #

在Vercel项目后台添加环境变量APP_URL（无需NEXT_PUBLIC_前缀，仅服务端使用），值为你的Vercel域名（如https://your-app.vercel.app）；本地.env.local中设置APP_URL=http://localhost:3000。使用时直接读取：

async function getProducts() {
  const res = await fetch(`${process.env.APP_URL}/api/products`);
  return res.json();
}

方案3：直接调用API路由逻辑函数（最优） #

前后端一体化项目中，服务端组件无需通过HTTP请求调用自身API，直接导入处理函数即可：
假设/api/products/route.js中有：

export async function GET() {
  // 业务逻辑或数据库查询
  return Response.json({ products: [...] });
}

服务端组件中直接调用：

import { GET as getProductsAPI } from '@/app/api/products/route';

async function getProducts() {
  const response = await getProductsAPI();
  return response.json();
}

• 跳过HTTP请求，性能更优，无URL适配问题。

注意事项 #

• 服务端组件中fetch默认缓存请求结果，按需配置cache: 'no-store'关闭缓存；
• 本地开发避免错误的CORS配置导致请求异常。

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