javascriptroom blog

Quiz about Error Handling in Next.js

Error handling is a crucial aspect of building robust and reliable web applications, and Next.js provides several powerful mechanisms to handle errors effectively. In this blog, we'll explore different aspects of error handling in Next.js through a quiz. This quiz will not only test your knowledge but also help you understand the common practices and best practices for error handling in Next.js projects.

2026-07

Table of Contents#

  1. Basic Error Handling in Next.js
  2. Custom Error Pages
  3. Error Handling in API Routes
  4. Client - Side vs Server - Side Error Handling
  5. Best Practices Quiz
  6. Answers and Explanations
  7. Conclusion
  8. References

Basic Error Handling in Next.js#

Quiz Question 1#

In Next.js, which of the following is a built - in way to throw an error during page rendering? A. throw new Error('Page not found') B. next(new Error('Page not found')) C. return new Error('Page not found') D. console.error('Page not found')

Quiz Question 2#

What happens when an unhandled error occurs during server - side rendering (SSR) in Next.js? A. The application crashes completely. B. Next.js displays a default error page. C. The page will load without any content. D. The browser will show a blank screen.

Custom Error Pages#

Quiz Question 3#

How can you create a custom 404 error page in Next.js? A. Create a file named 404.js in the pages directory. B. Create a file named _404.js in the root directory. C. Add a custom error handler in next.config.js. D. Define a getServerSideProps function that returns a 404 error.

Quiz Question 4#

If you want to create a custom 500 error page in Next.js, what should you do? A. Create a file named 500.js in the pages directory. B. Override the default error handling middleware in Next.js. C. Use a third - party library to handle 500 errors. D. Add a try - catch block in every page component.

Error Handling in API Routes#

Quiz Question 5#

In a Next.js API route, how can you return an error response? A. res.status(400).json({ error: 'Bad request' }) B. res.sendError('Bad request') C. throw new Error('Bad request') D. return { error: 'Bad request' }

Quiz Question 6#

What is the recommended way to handle errors in a Next.js API route to prevent the server from crashing? A. Use a global error handling middleware for all API routes. B. Add a try - catch block around the main logic of the API route. C. Ignore errors and let the client handle them. D. Use a custom error class for all API errors.

Client - Side vs Server - Side Error Handling#

Quiz Question 7#

Which of the following statements is true about client - side error handling in Next.js? A. Client - side errors are always more critical than server - side errors. B. Client - side errors can be handled using try - catch blocks in React components. C. Next.js does not support client - side error handling. D. Client - side errors are only related to network issues.

Quiz Question 8#

Server - side error handling in Next.js can be used to: A. Only display error messages to the user. B. Log errors for debugging purposes. C. Automatically fix errors without any human intervention. D. Send error reports to the client without handling them on the server.

Best Practices Quiz#

Quiz Question 9#

Which of the following is a best practice for error handling in Next.js? A. Log all errors to the console without any additional context. B. Use generic error messages for all types of errors. C. Provide meaningful error messages to the user based on the error type. D. Ignore errors in development mode.

Quiz Question 10#

When handling errors in Next.js, it is a good practice to: A. Catch all errors at the top - level component and do nothing. B. Duplicate error handling logic across multiple components. C. Centralize error handling logic in a single middleware or utility function. D. Let the browser handle all errors without any custom handling in Next.js.

Answers and Explanations#

Answer 1#

The correct answer is A. In Next.js, during page rendering, you can simply throw an error using the standard throw new Error() syntax. Option B (next(new Error('Page not found'))) is more relevant in Express.js middleware. Option C (return new Error('Page not found')) just returns an error object, not actually throwing an error. Option D (console.error('Page not found')) only logs the error to the console and does not throw it.

Answer 2#

The correct answer is B. When an unhandled error occurs during server - side rendering (SSR) in Next.js, Next.js displays a default error page. The application does not crash completely, and the page won't just load without content or show a blank screen.

Answer 3#

The correct answer is A. To create a custom 404 error page in Next.js, you need to create a file named 404.js in the pages directory. Option B (_404.js in the root directory) is incorrect. Option C (adding a custom error handler in next.config.js) is not the way to create a custom 404 page. Option D (defining a getServerSideProps function that returns a 404 error) is not for creating a custom 404 page.

Answer 4#

The correct answer is A. To create a custom 500 error page in Next.js, you create a file named 500.js in the pages directory. Overriding the default error handling middleware (Option B) is more complex and not the standard way for a custom 500 page. Using a third - party library (Option C) is not necessary for this basic functionality. Adding a try - catch block in every page component (Option D) is not related to creating a custom 500 page.

Answer 5#

The correct answer is A. In a Next.js API route, you can return an error response using res.status(400).json({ error: 'Bad request' }). Option B (res.sendError('Bad request')) is not a valid Next.js API response method. Option C (throw new Error('Bad request')) will cause an unhandled error if not caught. Option D (return { error: 'Bad request' }) will not send an appropriate HTTP status code.

Answer 6#

The correct answer is B. The recommended way to handle errors in a Next.js API route to prevent the server from crashing is to add a try - catch block around the main logic of the API route. Using a global error handling middleware for all API routes (Option A) is also possible but may be overkill for simple cases. Ignoring errors and letting the client handle them (Option C) is not a good practice as it can lead to server instability. Using a custom error class for all API errors (Option D) is a good idea for error classification but does not directly prevent server crashes.

Answer 7#

The correct answer is B. Client - side errors in Next.js can be handled using try - catch blocks in React components. Client - side errors are not always more critical than server - side errors (Option A). Next.js fully supports client - side error handling (Option C). Client - side errors can be related to many things, not just network issues (Option D).

Answer 8#

The correct answer is B. Server - side error handling in Next.js can be used to log errors for debugging purposes. It is not just for displaying error messages to the user (Option A). It cannot automatically fix errors without human intervention (Option C). And it is important to handle errors on the server before sending meaningful reports to the client (Option D).

Answer 9#

The correct answer is C. A best practice for error handling in Next.js is to provide meaningful error messages to the user based on the error type. Logging all errors to the console without any additional context (Option A) is not helpful for debugging. Using generic error messages for all types of errors (Option B) does not give the user or developer enough information. Ignoring errors in development mode (Option D) can lead to hard - to - find bugs in production.

Answer 10#

The correct answer is C. When handling errors in Next.js, it is a good practice to centralize error handling logic in a single middleware or utility function. Catching all errors at the top - level component and doing nothing (Option A) is not helpful. Duplicating error handling logic across multiple components (Option B) makes the code hard to maintain. Letting the browser handle all errors without any custom handling in Next.js (Option D) can lead to a poor user experience.

Conclusion#

Error handling is an essential part of building Next.js applications. By understanding the basic concepts, custom error page creation, error handling in API routes, and the difference between client - side and server - side error handling, you can create more robust and reliable applications. Following the best practices discussed in this quiz will also help you write cleaner and more maintainable code.

References#