Handle Runtime Errors in Next.js 13 Nested Routes
We need to set up error handling so that if something goes wrong our in our app our users aren't left with a broken page and not know what to do. Next.js 13 has error handling that we can access at the route level. To handle errors on our dynamic pages we'll create an error.js file within our [...slug] folder.
Any errors that occur within these routes will display the component that we define here. It should be noted that errors are handled on the client so you have to set the "use client" directive at the top of your error pages.
On our error page we will maintain the style of our application and direct the user back to the home page informing them that something went wrong. You can even use the reset prop to refresh the page and try again if that's the behavior that you want.
Instructor: [0:00] We want to be able to handle errors that occur as we navigate and use our application. At the moment, when I click on post, I get the post back, and I can go back. Now, if I enter a route that doesn't exist, it breaks my application, and says, "Cannot read properties of undefined."
[0:19] To do this and handle this error and not disrupt the user, we'll go back first, and in VS Code, clean up our file explorer first. In our ...slug folder, we'll create a new file called error.js. We'll say, 'use client' to let Next.js know that this is a client component, and not a server component. We'll start by importing Link from 'next/link'.
[0:51] We want our layout of the page to be similar to our About page. We'll go to our About page and copy this layout, and we'll go into our error page and paste, save that, and change this to error...No, we'll change this to say error and say, "Something not right." Very important, our error should not be async, and we save.
[1:23] If we go back to our browser and navigate to a route that doesn't exist, Next.js should throw this error page and say, "Something not right."
[1:33] Next.js gives us access to two props in our error component -- reset and error. Reset lets us refresh and query the user to make a request again, while error gives us information on what exactly went wrong. We'll replace "Something not right" in the description with error.message. You can see, it says, "Cannot read properties of undefined (reading 'attributes')." Now we have a better idea of the error.
[2:08] For a better user interface, however, we want to query the user and tell them to navigate back to the home page. We'll say, "Try go to the..." and use our link component here and say, "home page." We'll add an href to our link component and say home and classname to give this some styling and say, on hover, we want to underline. I'll close the file explorer and save.
[2:48] I can navigate back to the home page, when I met with an error. If I navigate to a page that doesn't exist, I get the error message, and I can go back to the home page.
[3:00] Now, we'll change this from error.message to, "It looks like something went wrong," and save. That is how you handle runtime errors in Next.js 13 using the app directory.