NextJS 13 Pages Router API路由POST请求在Firebase Hosting失效问题

问题原因分析 #

你的问题源于两个核心点：

1. 手动关闭了NextJS的bodyParser但未手动处理请求体解析，导致带请求体的POST请求因数据流未被消费而挂起；
2. 仅通过firebase deploy --only hosting部署，而NextJS的API路由实际运行在Firebase Functions上，单独部署hosting不会更新API路由的代码。

解决方案 #

方案1：恢复默认bodyParser（推荐，适合常规JSON请求） #

移除代码中的bodyParser: false配置，让NextJS自动处理请求体解析：

import type { NextApiRequest, NextApiResponse } from "next";
import { Logger } from "@utils/logger";

type ResponseData = {
  message: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  if (req.method !== "POST") {
    // 加return避免后续代码执行
    return res.status(405).json({ message: "Only POST requests allowed" });
  }

  // 现在可正常访问req.body
  console.log("请求体内容:", req.body);
  res.status(200).json({ message: "Hello from Next.js!" });
}

// 移除这段关闭bodyParser的配置
// export const config = {
//   api: {
//     bodyParser: false,
//   },
// };

方案2：保留bodyParser关闭，手动解析请求体（适合处理大文件/特殊格式） #

如果必须关闭默认bodyParser（比如处理流式请求），需要手动读取并解析请求体：

1. 先安装依赖：

npm install raw-body @types/raw-body

2. 修改API路由代码：

import type { NextApiRequest, NextApiResponse } from "next";
import getRawBody from "raw-body";
import { Logger } from "@utils/logger";

type ResponseData = {
  message: string;
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  if (req.method !== "POST") {
    return res.status(405).json({ message: "Only POST requests allowed" });
  }

  try {
    // 读取原始请求体
    const rawBody = await getRawBody(req);
    // 根据请求格式解析，这里以JSON为例
    const parsedBody = JSON.parse(rawBody.toString());
    console.log("解析后的请求体:", parsedBody);
  } catch (err) {
    console.error("请求体解析失败:", err);
    return res.status(400).json({ message: "无效的请求体格式" });
  }

  res.status(200).json({ message: "Hello from Next.js!" });
}

export const config = {
  api: {
    bodyParser: false,
  },
};

方案3：正确部署项目 #

NextJS的API路由托管在Firebase Functions上，仅部署hosting不会更新API代码，需执行全量部署或同时部署hosting和functions：

# 全量部署
firebase deploy

# 或仅部署hosting和functions
firebase deploy --only hosting,functions

额外检查：验证firebase.json配置 #

确保你的firebase.json中正确配置了NextJS框架支持：

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "us-central1" // 可根据需求修改区域
    }
  }
}

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