Next.js: accessing body data when sending a request with fetch

I sent the data validated through onValid in React Hook Form to pages / users / enter.tsx with fetch.

1
2
3
4
5
6
7
8
9
10  const onValid = (data: EnterForm) => {
    // console.log(JSON.stringify(data));
    fetch("/api/users/enter", {
      method: "POST",
      body: JSON.stringify(data),
      headers: {
        "Content-Type": "application/json",
      },
    });
  };

I found that without the "Content-Type" : "application/json" line in headers, accessing the body of req, that is, the request, in enter.tsx printed undefined. I learned that to fix this, the "Content-Type" : "application/json" option has to be added to headers.

enter.tsx

1
2
3
4
5
6
7
8
9
10import client from "@/libs/client";
import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  console.log(req.body.email);
  res.status(200).end();
}

Next.js: accessing body data when sending a request with fetch

More in Projects