How to add Custom 404 page not found page in next.js

In this article, we cover how to create a custom 404 page-not-found handling page when entering a wrong URL/page on Next.js

In NEXT.JS, It provides a custom 404 page-not-found handling page,

1. Create a not-found.js file Inside the app root pages directory of your Next.js project, create a file named not-found.js. This file will handle all 404 page-not-found errors that occur in your application.
2. The name must be the same as given above, and it must be in the “app” root directory.
3. Define Custom Error Component: In this file, you can add UI and other functions that you want to display when an error occurs
4. Whenever we enter the wrong URL or invalid page on any page, this page will be displayed on that place

With this, we can handle 404 errors using custom 404 error pages on NEXT.JS