Handling Node.js Request Bodies with Vercel

In this guide, we will show you how to parse a Node.js request body, for use inside a Serverless Function deployed to Vercel, without requiring a framework such as Express.

This guide assumes the request is sent with a Content-Type of application/json. However, many more content types can be parsed if required.

Step 1: Creating the Function

To get started, create a project directory with an /api directory inside and cd into it:

mkdir req-body && mkdir req-body/api

cd req-body

To illustrate the parsing of a request body, create an index.js file inside your /api directory with the following code:

export default async function handler(req, res) {
  const { body } = req;
  return res.send(`Hello ${body.name}, you just parsed the request body!`);
}

This function takes a POST request, parses the body, and uses data from the body in the response.

The key part here is line 2. Vercel adds a number of Express like helper properties to make wording with Node.js even easier.

With the req.body helper, the incoming request is parsed automatically, removing the need for third-party libraries or further code to handle the ReadableStream format the request normally arrives in.

Step 2: Deploying the Function

Deploying your function to Vercel can be done with a single command:

vercel

You have now created and deployed your project, all that's left to do is test that it works.

Step 3: Sending the Request

To verify that the JSON is being parsed correctly, make a POST request to your new deployment using curl by executing the below code inside your terminal:

curl -X POST "https://your-deployments-url.vercel.app/api" \
  -H "Content-Type: application/json" \
  -d '{
  "name": "Reader"
}'

You will receive a response similar to the following:

Hello Reader, you just parsed the request body!

Congratulations, now you know how to parse request bodies with Vercel in Node.js!

Bonus: Understanding Why this Works

When Node.js receives a request, the body is in the format of a ReadableStream.

To get the data from the stream, you need to listen to its data and end events. To do this requires a few lines of code which you would much rather not have to repeat.

By using helper properties, the request is already parsed for you, allowing you to access the data immediately.