Server-side error handling in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the error handling function from Next.js.

NextJS

import { [1] } from 'next/server';

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

ANextResponse

Bredirect

Cerror

DNextError

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'error' which is not a valid import from 'next/server'.

Confusing 'redirect' with error handling.

Trying to import 'NextError' which does not exist.

The NextResponse object is imported from 'next/server' to handle responses including errors on the server side.

2fill in blank

medium

Complete the code to return a 404 error with a message in a Next.js server function.

NextJS

return new [1]('Not Found', { status: 404 });

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

AError

BNextResponse

CResponse

DNextError

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Error' which does not set HTTP status codes directly.

Using 'NextResponse' with a constructor that does not exist.

Using 'NextError' which is not a valid Next.js class.

Returning a new Response with a status code is the standard way to handle server-side errors in Next.js. NextResponse is used for additional Next.js features but does not support this constructor signature.

3fill in blank

hard

Fix the error in this server function to correctly catch and handle errors.

NextJS

export async function GET() {
  try {
    const data = await fetchData();
    return NextResponse.json(data);
  } catch (error) {
    return new [1]('Server Error', { status: 500 });
  }
}

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

AError

BResponse

CNextResponse

DNextError

Attempts:

3 left

💡 Hint

Common Mistakes

Returning 'Error' which is not a response object.

Using 'NextError' which does not exist.

Using 'NextResponse' with a constructor that does not exist.

To return an error response in Next.js server functions, you create a new Response with the error message and status code. NextResponse does not support this constructor signature.

4fill in blank

hard

Fill both blanks to create a JSON error response with status 400 in a Next.js server function.

NextJS

return NextResponse.[1]({ error: 'Bad Request' }, { status: [2] });

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

Ajson

Btext

C400

D500

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text' instead of 'json' to send JSON data.

Using status 500 which means server error, not bad request.

Omitting the status code.

The NextResponse.json method sends a JSON response, and the status code 400 indicates a bad request error.

5fill in blank

hard

Fill all three blanks to handle a missing parameter error and return a JSON response with status 422.

NextJS

if (!params.id) {
  return NextResponse.[1]({ message: 'ID is required' }, { status: [2] });
}

throw new [3]('Unexpected error');

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

Ajson

B422

CResponse

DError

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Response' instead of 'json' to send JSON data.

Using status 400 or 500 instead of 422.

Throwing 'Response' instead of 'Error' for exceptions.

Use NextResponse.json to send JSON data, status 422 means unprocessable entity, and Error is thrown for unexpected errors.