Error occurred while saving user data: TypeError: req.json is not a function

Question

Node Backend

import { NextResponse } from "next/server";

import User from "../../models/post";

const POST = async (req, res) => {
    try {
        const body = req.json(); 
        console.log(req);
        const userData = {
            Title: body.title,
            content: body.content,
            tag: body.tag,
            time: new Date() 
        };

       //make corrections here
        return NextResponse.json({ message: "User posted successfully" }, { status: 200 });
    } catch (error) {
        console.error("Error occurred while saving user data:", error);
        return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
    }
};

export default POST;

Frontend fetch API

 const response = await fetch('/api/write', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                title: title,
                content: value,
                tag: "reactjs" 
            }),
        });

        if (!response.ok) {
            throw new Error('no network response');
        }

        
        console.log('Post successfully published');
    } catch (error) {
        console.error('Error publishing post:', error);
        
    }

The error is that only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.

At stringify (<anonymous>) as well as req.json is not a function error, I'm getting this error in Next.js 14 using the App router

So what I understand from these errors is that I cannot pass certain objects from server components to client components, but I am not sending anything from my server api where I am just creating a post for a blog ,just simply passing a message back to the react frontend.

I just want to know why is this happening?