Next.js API路由中res未定义问题求助

核心问题 #

你误用了Next.js Pages Router的API路由写法（依赖req/res参数），但代码是在App Router的app/api/proxy/page.js中——这两种路由系统的语法完全不兼容，导致res参数根本不存在，才会抛出Cannot read properties of undefined (reading 'status')错误。

正确写法（App Router Route Handler） #

App Router的API路由（官方称为Route Handler）需要导出对应HTTP方法的异步函数，通过NextResponse返回标准JSON响应：

import { NextResponse } from 'next/server';

// 导出对应HTTP方法的函数，比如GET、POST
export async function GET() {
  // 调用第三方接口
  try {
    const thirdPartyResponse = await fetch('https://你的第三方接口地址');
    const thirdPartyData = await thirdPartyResponse.json();

    // 返回自定义JSON响应，status参数可选，默认200
    return NextResponse.json({ 
      name: 'John Doe',
      thirdPartyData: thirdPartyData
    }, { status: 200 });
  } catch (error) {
    // 错误处理，返回500状态码
    return NextResponse.json({ error: '请求第三方接口失败' }, { status: 500 });
  }
}

为什么直接return对象不行？ #

直接return { name: 'John Doe' }时，Next.js会把这个对象当成React组件的返回值处理，而非API响应，所以客户端拿到的不是JSON格式数据。必须用NextResponse.json()包装，它会自动设置正确的Content-Type: application/json响应头。

扩展：处理POST请求（如果需要） #

如果API需要接收POST请求，通过request参数获取请求体：

export async function POST(request) {
  const requestBody = await request.json();
  // 处理请求体并调用第三方接口
  return NextResponse.json({ message: 'POST请求处理完成' });
}

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