Next.js app目录下API路由请求返回500错误的原因排查

1. 优先查看服务器端错误日志 #

500错误本质是服务器端抛出未捕获异常，Next.js会在对应位置输出详细报错：

• 本地开发：启动项目的终端窗口里找红色错误信息
• Vercel生产环境：进入项目的Functions面板，查看api/getSuggestion的执行日志
  日志会直接告诉你问题根源，比如Azure函数请求失败、环境变量未定义、JSON解析错误等。

2. 给API路由添加错误捕获逻辑 #

你的API路由未处理外部请求失败的情况，若Azure函数返回4xx/5xx状态码或请求无法连接，await fetch(...)会直接抛出异常导致500。修改route.ts：

export async function GET(request: Request) {
  try {
    const response = await fetch(`${process.env.VERCEL_URL || 'http://localhost:7071'}/api/getChatGPTSuggestion`, {
      cache: 'no-store'
    })

    // 检查外部请求是否成功
    if (!response.ok) {
      throw new Error(`Azure函数返回错误: ${response.status} ${response.statusText}`)
    }

    const textData = await response.text()
    return new Response(JSON.stringify(textData.trim()), { status: 200 })
  } catch (error) {
    // 打印错误到日志，同时返回明确的错误响应
    console.error('API路由错误:', error)
    return new Response(JSON.stringify({ error: '获取建议失败' }), { status: 500 })
  }
}

3. 验证环境变量与外部服务可用性 #

• 本地开发时，process.env.VERCEL_URL未定义，会使用http://localhost:7071，确保Azure函数本地模拟器正在运行且端口正确
• Vercel生产环境中，确认VERCEL_URL已自动配置，且Azure函数公网地址可访问（注意是否有防火墙限制Vercel的请求）

4. 检查响应格式与前端解析的匹配性 #

若Azure函数返回的是JSON格式数据，当前代码会对文本进行双重JSON编码，可能引发后续解析问题（虽不直接导致500，但需规范处理）：

// 如果Azure函数返回JSON，替换为以下逻辑
const data = await response.json()
return new Response(JSON.stringify(data), { status: 200 })

5. 规范SWR调用的参数一致性 #

你的fetchSuggestion硬编码了请求URL，但SWR传入了相同URL作为key，可调整为符合SWR规范的写法：

// 修改fetchSuggestion为接受url参数
export const fetchSuggestion = async (url: string) => {
  const response = await fetch(url, { cache: 'no-store' })
  if (!response.ok) throw new Error('请求失败')
  const data = await response.json()
  return data
}

// SWR调用保持参数一致
const { data: suggestion, isLoading, isValidating, mutate } = useSWR('/api/getSuggestion', fetchSuggestion, { revalidateOnFocus: false })

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