Next.js 13 App Router中API路由的正确使用方法

核心区别：Web标准Response对象 #

App Router的API路由不再使用Page Router里的NextApiRequest/NextApiResponse，而是采用Web标准的Request和Response对象，这是你代码报错的根本原因。

解决GET请求的两个问题 #

1. 返回JSON结构 #

要返回{ name: 'John Doe' }这类JSON数据，需要：

• 用JSON.stringify()序列化对象
• 设置响应头Content-Type: application/json

示例代码：

export async function GET() {
  return new Response(JSON.stringify({ name: 'John Doe' }), {
    headers: { 'Content-Type': 'application/json' },
  })
}

2. 设置响应状态码 #

在Response的第二个参数中传入status字段即可：

export async function GET() {
  // 返回400状态码和错误信息
  return new Response(JSON.stringify({ error: 'Bad Request' }), {
    status: 400,
    headers: { 'Content-Type': 'application/json' },
  })
}

修复POST请求代码 #

你的POST代码错误地沿用了Page Router的API，以下是修正后的版本：

关键修正点： #

• 用Web标准Request替代NextApiRequest，不需要NextApiResponse
• 获取请求体需要await req.json()（因为Request的body是ReadableStream）
• 始终返回Response对象，而非操作res

完整示例代码： #

// app/api/[route]/route.ts
type MyData = {
  name?: string
  answer?: string
  error?: string
}

export async function POST(req: Request) {
  try {
    const { nameLookup } = await req.json()

    if (!nameLookup) {
      // 返回400错误
      return new Response(JSON.stringify({ error: 'Please provide something to search for' } as MyData), {
        status: 400,
        headers: { 'Content-Type': 'application/json' },
      })
    }

    // 返回成功响应
    return new Response(JSON.stringify({ answer: 'John Doe' } as MyData), {
      status: 200,
      headers: { 'Content-Type': 'application/json' },
    })
  } catch (error) {
    // 处理JSON解析错误（比如请求体不是合法JSON）
    return new Response(JSON.stringify({ error: 'Invalid request body' } as MyData), {
      status: 400,
      headers: { 'Content-Type': 'application/json' },
    })
  }
}

额外TS提示 #

• 可以自定义响应类型（如上面的MyData），确保返回数据的类型安全
• 如果需要获取URL参数、查询参数，用req.url结合new URL(req.url)来解析：

  const url = new URL(req.url)
  const searchParams = url.searchParams
  const id = searchParams.get('id') // 获取?id=xxx的参数
  

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