Middleware in API have a null body on POST Requests

[idreaminteractive]

What version of Next.js are you using?

12.0.2

What version of Node.js are you using?

v14.18.0

What browser are you using?

Chrome

What operating system are you using?

Linux

How are you deploying your application?

next dev, next start, Vercel

Describe the Bug

When sending a POST request that gets handled by middleware in the /pages/api folder, the request body is always null.

So, in the client side (/pages/index.tsx) we have:

    fetch("/api/middlewaretest", {
      method: "post",
      body: JSON.stringify({ hello: "world" }),
      headers: { "content-type": "application/json" },
    })
      .then((res) => res.json())
      .then((res) => console.log(res))
      .catch((e) => {
        console.error(e);
      });
  };

In /api/middlewaretest/_middleware.ts we have:

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  console.log("method", req.method); // will be post
  console.log("bodyUsed", req.bodyUsed); // will be false
  console.log("headers", req.headers); // shows proper content type and content length
  console.log("body", req.body); // always null!

  /***
   *
   * If middleware is async and I try any of the following:
   *
   * await res.json() // TypeError: invalid json body reason: Unexpected end of JSON input
   * await res.text() // blank string
   *
   */
  return new Response(JSON.stringify({ message: "hello world!" }), {
    status: 200,
    headers: {
      "Content-Type": "application/json",
    },
  });
}

Expected Behavior

In https://nextjs.org/docs/api-reference/next/server#nextrequest it notes that NextRequest is an extension of the native Request interface which should provide a stream on req.body that could be read. However, it always comes across as null.

To Reproduce

1. Clone https://github.com/idreaminteractive/nextjs-middleware-body
2. yarn
3. yarn dev (or yarn build && yarn start)
4. Goto http://localhost:3000
5. Press the Send the post button to trigger the middleware, check the console logs to see req.body is always null for a POST request.

The second button (Send the post to hello) is a regular NextJS API end point and works fine.

[Kikobeats]

That's because you can't use Edge Functions with POST method right now.

We are working on it 🙂

[mtt87]

Is there any update on this or an ETA when it will be fixed? 👀
Out of curiosity are there any challenges in enabling POST method?
I thought that the underlying infra powering edge middleware functions would be the Cloudflare workers platform that indeed supports POST requests

[HeyImMatt]

I'm also having this middleware issue, but seems to be happening on all HTTP requests, not just POST

[jessehalpern]

Are these sorts of limitations documented anywhere? As excited as I am about middleware, it can be time consuming to diagnose whether we've done something wrong in our setup, or if it just isn't possible today

This part of the documentation even strongly implies that this is possible: https://nextjs.org/docs/api-reference/next/server#why-does-redirect-use-307-and-308

[Schniz]

I will tackle this ✋

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.