Request parsing in route handlers in NextJS - Mini Project: Build & Apply

Request parsing in route handlers

📖 Scenario: You are building a simple Next.js API route that receives JSON data from a client. You want to parse the incoming request body to extract user information.

🎯 Goal: Create a Next.js API route handler that parses the JSON request body to extract name and email fields and returns a JSON response confirming the received data.

📋 What You'll Learn

Create a POST route handler function named POST in app/api/user/route.js

Parse the incoming request body as JSON using await request.json()

Extract name and email from the parsed JSON

Return a JSON response with a message confirming the received name and email

💡 Why This Matters

🌍 Real World

Parsing JSON requests is essential for building APIs that accept data from clients, such as forms or apps sending user info.

💼 Career

Understanding request parsing in Next.js route handlers is a key skill for backend and full-stack developers working with modern React frameworks.

1

Create the POST route handler function

Create an async function called POST that takes a single parameter named request.

NextJS

# Your code here

Hint

In Next.js App Router, API route handlers are exported functions named after HTTP methods like POST.

2

Parse JSON from the request body

Inside the POST function, create a constant called data and assign it the result of await request.json().

NextJS

export async function POST(request) {
  // Parse JSON body
  // Your code here
}

Hint

Use await request.json() to read and parse the JSON body from the incoming request.

3

Extract name and email from parsed data

Destructure name and email from the data object inside the POST function.

NextJS

export async function POST(request) {
  const data = await request.json();
  // Extract name and email
  // Your code here
}

Hint

Use object destructuring to get name and email from the parsed JSON data.

4

Return a JSON response confirming the data

Return a new Response object with a JSON string body containing a message that says `Received user: ${name} with email: ${email}`. Set the Content-Type header to application/json.

NextJS

export async function POST(request) {
  const data = await request.json();
  const { name, email } = data;
  // Return JSON response
  // Your code here
}

Hint

Use new Response() with a JSON string and set the Content-Type header to application/json to send a JSON response.

Practice

1. In Next.js route handlers, which method is used to parse JSON data from a POST request's body?

easy

A. request.json()

B. request.text()

C. request.formData()

D. request.body()

Solution

1. Step 1: Understand the data type sent in the request

   JSON data requires parsing as JSON, not as text or form data.

2. Step 2: Identify the correct parsing method in Next.js route handlers

   The request.json() method parses the request body as JSON.

3. Final Answer:

   request.json() -> Option A

4. Quick Check:

   JSON data parsing = request.json() [OK]

Hint: Use request.json() to parse JSON bodies in Next.js [OK]

Common Mistakes:

• Using request.text() for JSON data
• Trying to use request.body() which is not a method
• Using request.formData() for JSON instead of form data

2. Which of the following is the correct syntax to parse form data in a Next.js route handler?

easy

A. const data = await request.json();

B. const data = await request.formData();

C. const data = request.formData();

D. const data = request.json();

Solution

1. Step 1: Recognize that form data parsing is asynchronous

   Parsing form data requires awaiting the promise returned by request.formData().

2. Step 2: Identify the correct syntax with await

   The correct syntax is const data = await request.formData(); to properly parse form data.

3. Final Answer:

   const data = await request.formData(); -> Option B

4. Quick Check:

   Form data parsing requires await request.formData() [OK]

Hint: Always await request.formData() to parse form data [OK]

Common Mistakes:

• Not using await with request.formData()
• Using request.json() to parse form data
• Calling request.formData() without await

3. Given this Next.js route handler code snippet, what will be logged if the request body contains JSON {"name":"Alice"}?

export async function POST(request) {
  const data = await request.json();
  console.log(data.name);
  return new Response('OK');
}

medium

A. "Alice"

B. undefined

C. Error: Cannot read property 'name' of undefined

D. "{\"name\":\"Alice\"}"

Solution

1. Step 1: Parse the JSON body using request.json()

   The request.json() method converts the JSON string into a JavaScript object.

2. Step 2: Access the 'name' property from the parsed object

   Since the JSON contains {"name":"Alice"}, data.name will be "Alice".

3. Final Answer:

   "Alice" -> Option A

4. Quick Check:

   Parsed JSON object property access = "Alice" [OK]

Hint: request.json() returns object; access properties normally [OK]

Common Mistakes:

• Expecting raw JSON string instead of parsed object
• Not awaiting request.json() causing undefined
• Trying to access property before parsing

4. Identify the error in this Next.js route handler code for parsing JSON:

export async function POST(request) {
  const data = request.json();
  return new Response(JSON.stringify(data));
}

medium

A. request.json() is not a valid method

B. Cannot use JSON.stringify on data

C. Missing await before request.json()

D. Response constructor requires status code

Solution

1. Step 1: Check how request.json() is called

   The request.json() method returns a promise and must be awaited.

2. Step 2: Identify missing await causing data to be a promise

   Without await, data is a promise, not the parsed object, causing incorrect response.

3. Final Answer:

   Missing await before request.json() -> Option C

4. Quick Check:

   Always await request.json() to get parsed data [OK]

Hint: Always await async parsing methods like request.json() [OK]

Common Mistakes:

• Forgetting await before request.json()
• Assuming request.json() returns data synchronously
• Misunderstanding promise behavior in async functions

5. You want to handle a POST request in Next.js that can accept either JSON or form data. Which approach correctly parses the request body depending on its Content-Type header?

hard

A. Always use await request.json() regardless of Content-Type

B. Use await request.formData() for all POST requests

C. Use await request.text() and manually parse JSON or form data

D. Check request.headers.get('content-type') and use await request.json() for 'application/json', await request.formData() for 'multipart/form-data'

Solution

1. Step 1: Identify the Content-Type header to determine data format

   The Content-Type header tells if the body is JSON or form data.

2. Step 2: Use conditional parsing based on Content-Type

   Use await request.json() for 'application/json' and await request.formData() for 'multipart/form-data' or 'application/x-www-form-urlencoded'.

3. Final Answer:

   Check content-type and parse accordingly with request.json() or request.formData() -> Option D

4. Quick Check:

   Parse based on Content-Type header [OK]

Hint: Check Content-Type header to choose JSON or formData parsing [OK]

Common Mistakes:

• Parsing all requests as JSON ignoring Content-Type
• Parsing all requests as formData ignoring Content-Type
• Not checking Content-Type before parsing