Next.js服务端组件调用API路由时触发500内部服务器错误

问题场景 #

我创建了如下结构的Next.js API路由：

api
└── readItems
    └── route.js

route.js代码仅返回简单JSON响应：

export async function GET(Request) {
    const response = { message: "This is a new API route" };
    return new Response(JSON.stringify(response), {
      headers: { 'Content-Type': 'application/json' },
    });
}

手动在浏览器输入http://localhost:3888/api/readItems能正常访问，但在服务端组件中用以下代码调用时，返回500内部服务器错误：

const _accordionItems = await fetch('http://localhost:3888/api/readItems',{method:'get'})

错误响应详情：

Response {
  status: 500,
  statusText: 'Internal Server Error',
  headers: Headers {
    'cache-control': 'no-store, must-revalidate',
    'x-powered-by': 'Next.js',
    etag: '"11zryv620o3240"',
    'content-type': 'text/html; charset=utf-8',
    vary: 'Accept-Encoding',
    'content-encoding': 'gzip',
    date: 'Wed, 27 Nov 2024 07:19:10 GMT',
    connection: 'keep-alive',
    'keep-alive': 'timeout=5',
    'transfer-encoding': 'chunked'
  },
  body: ReadableStream { locked: false, state: 'readable', supportsBYOB: true },
  bodyUsed: false,
  ok: false,
  redirected: false,
  type: 'basic',
  url: 'http://localhost:3888/api/readItems'
}

一开始尝试用/api/readItems直接调用时，出现invalid url错误，改用完整URL后还是触发500错误。

解决方法 #

1. 最优方案：直接调用API路由的处理函数 #

在Next.js服务端组件里，完全没必要通过网络请求调用内部API，直接导入路由里的处理函数执行就行，既高效又避免网络层面的问题：

// 服务端组件代码
import { GET } from '@/app/api/readItems/route';

async function MyServerComponent() {
  // 调用GET函数，不需要真实Request对象的话传空对象即可
  const apiResponse = await GET({});
  const data = await apiResponse.json();
  
  return <div>{data.message}</div>;
}

export default MyServerComponent;

2. 若坚持用fetch调用（不推荐） #

如果一定要用fetch，注意这几点：

• 确认项目启动的端口和你硬编码的3888一致，避免端口不匹配
• 别硬写URL，用环境变量更稳妥：

  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3888';
  try {
    const response = await fetch(`${baseUrl}/api/readItems`, { method: 'GET' });
    if (!response.ok) {
      // 打印错误详情，方便排查
      const errorDetails = await response.text();
      console.error('API调用失败:', errorDetails);
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error('捕获到错误:', err);
  }
  

3. 排查500错误的关键步骤 #

• 看Next.js终端日志！500错误一般会在终端输出具体的错误栈，这是最快定位问题的方式
• 检查API路由代码有没有未捕获的异常，比如变量拼写、逻辑错误
• 在服务端组件里添加错误捕获，别直接忽略响应状态

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