Next13中读取Twilio接收的SMS数据失败问题求助

在Twilio控制台配置Webhook后，当Twilio号码收到SMS时会触发调用Next.js的API文件，但无法读取请求中的实际数据，console.log(req.body)输出为ReadableStream { locked: false, state: 'readable', supportsBYOB: false }，导致调用addMessage存储body和from字段时，两个值都被存为undefined。

当前代码：

import { NextApiRequest, NextApiResponse } from 'next';
import { NextResponse } from 'next/server';
import { addMessage } from '../../messageStore';

export async function POST(req: NextApiRequest, res: NextApiResponse) {
  // Get message body and sender's number from the request body
  const body = req.body.Body;
  const from = req.body.From;

  console.log(req.body);

  // Add the new message to the messages array
  addMessage({ body, from });

  return NextResponse.json(res);
}

问题原因 #

代码混用了Next.js的App Router和Pages Router的API：

• NextApiRequest/NextApiResponse是Pages Router（pages/api目录）的专属类型
• NextResponse是App Router（app目录）的响应工具
• 在App Router中，POST函数的参数是标准Web API的Request对象，而非NextApiRequest，因此req.body是未解析的ReadableStream，无法直接访问Body和From字段。

Twilio发送的Webhook请求格式为application/x-www-form-urlencoded，必须先解析为表单数据才能读取字段。

解决方案 #

方案1：使用App Router（app目录下的API路由） #

调整代码使用标准Request对象，手动解析表单数据：

import { NextResponse } from 'next/server';
import { addMessage } from '../../messageStore';

export async function POST(req: Request) {
  // 解析Twilio发送的表单数据
  const formData = await req.formData();
  const body = formData.get('Body') as string;
  const from = formData.get('From') as string;

  console.log({ body, from });

  addMessage({ body, from });

  // 返回成功响应
  return NextResponse.json({ success: true });
}

方案2：使用Pages Router（pages/api目录下的API路由） #

如果是Pages Router的API，使用NextApiRequest/NextApiResponse并正确返回响应：

import { NextApiRequest, NextApiResponse } from 'next';
import { addMessage } from '../../messageStore';

// Pages Router使用默认导出的handler函数
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // 只处理POST请求
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method Not Allowed' });
  }

  const body = req.body.Body;
  const from = req.body.From;

  console.log({ body, from });

  addMessage({ body, from });

  return res.status(200).json({ success: true });
}

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