For this day I want to talk about how NextJs deal with Http Errors. The way to customize not only the design of the error page but also the actual status code sent to the clients.
Let’s assume we have a simple application with two pages, one for the list of users and another to see the details page of each user.
That means we have two valid urls in our app.
/ # root url that show a list of users
Let’s see quickly the code of one of our pages:
Nothing weird here, just iterating an array of users and show them on the page.
Now let’s create the details page where we can show all the information of each user.
I know repeating the users array is not ideal, but since the goal of this post is NextJs error pages, let’s pretend that’s ok. This page get the id of the user from the url and then search if that user exist on the users array. Then return the result so NextJs can pass the value as a prop to the Details component.
Since the app only have two routes if you type any other url in our browser NextJs will show the default Error Page. Let’s enter the following url in the browser
NextJs is going to show you this page:
And if you open the developer tools you can see the status code of that response is 404 Not Found.
But what about if you type the url:
This match the dynamic page: pages/users/[id].js, but in the users array there is no user with ID equals to 3 so according the current functionality of this page it should return an empty object as a prop to the page.
Instead showing a weird page with incomplete information let’s change that and show the default 404 page of NextJs.
First we add a new statusCode variable to our result object, the value of this variable depends if the user is found in the users array. If the user exist the statusCode will be 200, otherwise 404.
But how NextJs could know that we want to show the default Error page? It is quite easy, you need to return the default error component.
Pretty easy, right? Now you can see the error page when an nonexistent user is requested. And if you open the developer tools
you can see the 200 status code is returned.
But you are sending the error page! Why is the status code still 200?
Well the response that NextJs is giving you is not responsability of the Error component. If you want to show a different status code you need to set it in your response as well. Let’s do that.
And if you test your page again you will see the error page and the correct status code as well!
What about if you do not like the default Error page? Well you can replace it!
In order to do that first you will need a new file called _error.js in your pages folder.
Now in the details page you need to replace the Error component by the new one:
And if you try again you will see a lovely cat telling you
got a 404 error page.
Play with the full code here:
- Now you can control how and when show the default error page
- You can modify the status code of your responses to keep an equivalent with the current Error you are displaying.
- You can customize the aspect of the error page