Request parsing in route handlers in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to parse JSON body from the request in a Next.js route handler.

NextJS

export async function POST(request) {
  const data = await request.[1]();
  return new Response(JSON.stringify(data));
}

Drag options to blanks, or click blank then click option'

Atext

Bblob

CformData

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.text() instead of request.json() causes the body to be read as plain text.

Using request.formData() when the body is JSON will cause errors.

In Next.js route handlers, request.json() parses the JSON body from the request.

2fill in blank

medium

Complete the code to extract a query parameter named 'id' from the URL in a Next.js route handler.

NextJS

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const id = searchParams.[1]('id');
  return new Response(id);
}

Drag options to blanks, or click blank then click option'

Aget

Bhas

CgetAll

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'has' returns a boolean, not the value.

Using 'getAll' returns an array, not a single value.

The URLSearchParams.get() method retrieves the first value of the given query parameter.

3fill in blank

hard

Fix the error in the code to correctly parse JSON body and handle missing fields in a Next.js POST route handler.

NextJS

export async function POST(request) {
  const data = await request.[1]();
  if (!data.name) {
    return new Response('Missing name', { status: 400 });
  }
  return new Response(`Hello, ${data.name}`);
}

Drag options to blanks, or click blank then click option'

Atext

Bjson

CformData

Dblob

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.text() and then trying to access properties on the string causes errors.

Using request.formData() when expecting JSON data.

To access JSON fields like name, you must parse the body with request.json().

4fill in blank

hard

Fill both blanks to parse JSON body and extract a nested field 'user.email' in a Next.js POST route handler.

NextJS

export async function POST(request) {
  const data = await request.[1]();
  const email = data.user?.[2];
  return new Response(email || 'No email');
}

Drag options to blanks, or click blank then click option'

Ajson

Btext

Cemail

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.text() instead of request.json() causes data to be a string.

Accessing a wrong property name instead of 'email'.

Use request.json() to parse JSON, then access the email field from user.

5fill in blank

hard

Fill all three blanks to parse JSON body, extract 'username' and 'age', and check if age is over 18 in a Next.js POST route handler.

NextJS

export async function POST(request) {
  const data = await request.[1]();
  const username = data.[2];
  if (data.[3] > 18) {
    return new Response(`Welcome, ${username}`);
  }
  return new Response('Too young', { status: 403 });
}

Drag options to blanks, or click blank then click option'

Ajson

Busername

Cage

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.text() instead of request.json() causes errors.

Mixing up property names or misspelling them.

Parse JSON with request.json(), then access username and age fields to check age.

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