NextJS从Pages路由迁移到App路由：res.status不是函数

问题背景 #

将Next.js从13.2.5版本升级到14.1.0版本，使用app/api/example/route.js替代原pages/api/example.js时，运行代码出现TypeError: res.status is not a function at POST错误，旧版Pages Router中使用export async function(req, res)的代码可正常运行。

问题原因 #

Next.js的App Router与Pages Router的API处理机制完全不同：

• App Router的路由函数仅接收req参数，没有res参数
• 不能直接通过req.body获取请求体，需调用req.json()方法解析
• 响应需通过NextResponse来构建，而非原Pages Router的res对象方法

修复后的完整代码 #

import { Configuration, OpenAIApi } from "openai";
import { NextResponse } from 'next/server';

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

export async function POST(req) {
  if (!configuration.apiKey) {
    return NextResponse.json(
      { error: { message: "OpenAI API key not configured" } },
      { status: 500 }
    );
  }

  const body = await req.json();
  const { messages } = body;

  if (!Array.isArray(messages)) {
    return NextResponse.json(
      { error: { message: "Invalid conversation format" } },
      { status: 400 }
    );
  }

  try {
    const incomingMessages = messages || [];

    const chatMessages = [
      {
        role: "system",
        content: `This is a roleplay. You are a participant in a market research study, simulating a 
        potential customer's perspective on a new product.
        `,
      },
      ...incomingMessages,
    ];

    const completion = await openai.createChatCompletion({
      model: "gpt-3.5-turbo",
      messages: chatMessages,
      temperature: 0,
      max_tokens: 1000,
    });

    const responseMessage = completion.data.choices[0].message;
    const updatedConversationHistory = [...chatMessages, responseMessage];

    return NextResponse.json({ messages: updatedConversationHistory }, { status: 200 });
  } catch (error) {
    if (error.response) {
      console.error(error.response.status, error.response.data);
      return NextResponse.json(error.response.data, { status: error.response.status });
    } else {
      console.error(`Error with OpenAI API request: ${error.message}`);
      return NextResponse.json(
        { error: { message: "An error occurred during your request." } },
        { status: 500 }
      );
    }
  }
}

关键修改点 #

• 导入NextResponse用于构建响应
• 移除函数参数中的res，仅保留req
• 用await req.json()解析请求体，替代直接访问req.body
• 所有响应改用NextResponse.json(data, { status: 状态码 })的方式返回
• 变量名messages重命名为chatMessages，避免与解构的请求体变量冲突（提升代码可读性）

内容的提问来源于stack exchange，提问作者Antonio Andrés