Unable to read request body Next.js

[David200337]

Hey everyone! 👋

When experimenting with Next.js and Deno 2.0, I stumbled upon a strange issue that I couldn't quite figure out…

I've created a small Next.js project with a basic route file. In this file, I added both GET and POST methods with dummy responses. Although the GET endpoint works perfectly, when I send a POST request with a standard JSON body, I consistently receive an "Invalid JSON parsing error."

The Request

Here's what the request looks like:

Code

My app/api/users/route.tsx looks as follows:

import { NextRequest, NextResponse } from "next/server";

export function GET(request: NextRequest) {
    return NextResponse.json({ name: "John Doe" });
}

export async function POST(request: NextRequest) {
    try {
        const body = await request.json(); // Error seems to occur here

        return NextResponse.json(body);
    } catch (error) {
        console.error("Error parsing JSON:", error);
         return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
    }
}

Error

Executing this request leads to the following error:

Error parsing JSON: SyntaxError: "[object Object]" is not valid JSON
    at parse (<anonymous>)
    at packageData (ext:deno_fetch/22_body.js:402:14)
    at consumeBody (ext:deno_fetch/22_body.js:260:12)
    at eventLoopTick (ext:core/01_core.js:164:35)
    at async POST (webpack-internal:///(rsc)/./app/api/users/route.tsx, <anonymous>:15:22)
    at async AppRouteRouteModule.do (file:///home/dcwva/Dev/next-app/node_modules/.deno/[email protected]/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:10:32801)
 POST /api/users 400 in 368ms

Steps to reproduce

1. Create a standard Next.js project through the Deno CLI.
2. Add an api/users/route.tsx file.
3. Copy the content of the route file as shown above into the created file.
4. Run the project in dev mode using the deno task dev command.
5. Send a POST request to the api/users endpoint with the JSON body shown above.

Versions

• Deno: 2.0.4
• Next.js: 15.0.1 (version 15.0.2 doesn’t seem to work at all)

The issue only seems to appear when running the Next.js server through Deno; running it through Node.js works just fine.

Is there something I’m missing here, or could this be a potential bug within the Deno framework? Thank you so much in advance!

[VMinB12]

Encountered a similar error when trying to run this CopilotKit example..

[icedman]

Means deno doesn't yet support nextjs after all.

[bartlomieju]

Means deno doesn't yet support nextjs after all.

That's not true. This is a recent change in latest Next.js version that uses a fetch API overload that is not spec compliant.

Other runtimes like workerd are facing similar problems (https://github.com/whatwg/fetch/issues/1291#issuecomment-2405433410).

We are working on a solution that we will roll out in a few days.

[icedman]

Yup. nextjs thing. I saw this workaround from another project. Running fastify with nextjs. Works for me so far.

https://github.com/nextauthjs/next-auth/issues/11390

fastify.all('*', {
      // nextjs does its own POST body parsing, must run before fastify
      onRequest: async (req, res, next) => {
        res.hijack();
        try {
          await handle(req.raw, res.raw);
        } catch (err) {
          console.error('Error in', req.url, err);
          res.statusCode = 500;
          res.raw.end('Internal server error');
        }
        next();
      },
      handler: () => {},
    });

[HerrTuring]

Yup. nextjs thing. I saw this workaround from another project. Running fastify with nextjs. Works for me so far.

nextauthjs/next-auth#11390

fastify.all('*', {
      // nextjs does its own POST body parsing, must run before fastify
      onRequest: async (req, res, next) => {
        res.hijack();
        try {
          await handle(req.raw, res.raw);
        } catch (err) {
          console.error('Error in', req.url, err);
          res.statusCode = 500;
          res.raw.end('Internal server error');
        }
        next();
      },
      handler: () => {},
    });

Would you kindly explain how someone unfamiliar with fastify would implement this solution to solve the problem with next-auth?