Middleware in API have a null body on POST Requests

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.

[Schniz]

I will tackle this ✋

[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