Next JS Api Routes - POST - Invalid Body response with request body payload

[matthewgisonno]

Prerequisites

• I have written a descriptive issue title
• I have searched existing issues to ensure the bug has not already been reported

Fastify version

4.15.0

Plugin version

9.2.0

Node.js version

18.14.2

Operating system

macOS

Operating system version (i.e. 20.04, 11.3, 10)

13.2.1

Description

I'm trying to create a NextJS API Route for a POST method and send a payload. I can get regular page routes to work fine, even an API route with a GET method, works fine. I can also get a regular POST API Route to work, without a payload being sent

I created a API route located here: /src/pages/api/user.js ... This is based on the example located here: https://github.com/fastify/fastify-nextjs/blob/master/pages/api/user.js

I then updated my start file with the following:

  app.register(require("@fastify/nextjs")).after(() => {
    app.next("/hello");
    app.next("/api/user", { method: "POST" });
  });

When I open Post Man and try to send a POST request with the payload:

{
    "hello":"World"
}

the response I get is a 400 with "Invalid body" message.

I put together a SandBox located here:
https://codesandbox.io/s/lucid-rumple-ceetg2?file=/src/start.js:128-261

Steps to Reproduce

1. Create API route located here: /src/pages/api/user.js
2. Update start.js for API route
3. Restart server
4. Make a POST request to your API route with a JSON body payload: http://localhost/api/user
5. See 400 Invalid Body response

Expected Behavior

Expected behavior is a NextJS API route should handle a POST just like it does in NextJS. Am I doing something wrong?

[matthewgisonno]

Ok, following up here... I'm not sure this is actually a bug, but more of a "feature" of how fastify handles / parses data. After reviewing this document: https://www.fastify.io/docs/latest/Reference/ContentTypeParser/

I was able to fix the issue I was facing by killing all the content parsers and adding a generic parser. Like so:

  await app.register(fastifyNext, {}).after(async () => {
    app.removeAllContentTypeParsers();

    app.addContentTypeParser('*', function (request, payload, done) {
      done();
    });

    await app.next('/api/user', { method: 'POST' });
  });

Does this sound right or should this @fastify/nextjs plugin handle the POST method separately from the fastify server itself? Any feedback or comments wishing to explain further would be greatly appreciated.

[Eomm]

No, I don't think that is the right approach - at least it should not work with a paylod

I checked a bit without success, but I would investigate the interface instead

fastify.next('/hello', (app, req, reply) => {
  // your code
  // `app` is the Next instance
  app.render(req.raw, reply.raw, '/hello', req.query, {})
})

[matthewgisonno]

I saw that example, but I was unsure how to access req.raw and if that is just overwriting the request that is being forwarded to the next server, it's still eating the payload, so req.body should be the payload I send in my POST to the API route, but it creates a 400 error - Invalid Body.

Also worth mentioning, NextJS out of the box handles a POST request to an API Route with a payload. So in a normal NextJS app, you can access req.body without issues.

[christmoore]

Encountered the same in NextJS 13. vercel/next.js#24894 (comment) helped resolve this issue for me.