Next.js Tutorial #7 - Custom 404 Page

Key Takeaways

all right then so we've made a few different pages in this next application now but what about if a user tries to go to a url that doesn't exist for example forward slash abc well they get this built in 404 page right here now it doesn't look great but you can create your own 404 page and customize the content on that 404 page if you wish so i'm going to show you how to do that all we need to do is go to the pages right here add a new file and call this 404 dot js now again this is a specially named file much like the index one right here and this doesn't generate a url which is forward slash 404 instead what it does is create a component which is a bit like a catch-all so that if a url doesn't exist and a user tries to go to it then it's going to serve up this page component instead so let me just cross off a few of these different files so we don't have them all at the top and let's create this 404 components so first of all i'm going to create a stateless functional component and i'm going to call this not found now you don't have to call it not found you can call it something else if you wish and then inside here i'm going to create a simple template so a div with a class of not found and that's so we can style it in a few minutes and then inside that i'm going to do an h1 which says oops dot dot and then below that we'll do an h2 that says that page cannot be found and then at the bottom we'll add a paragraph tag just to link them back to the home page and i'll say go back to the and then this is going to be a link where it says home page now in order to create a link remember we need to import the link component so import link from next forward slash link like so and then we'll create that link component down here inside that we need an anchor tag we get rid of the href and we add that to the link itself and this is going to go to just forward slash which is the home page and then inside the anchor tag we'll just say home page like so all right then pretty simple so that should now be our 404 page so what i'm going to do is come over here and refresh this now and now we can see our custom 404 page now if we click on this it's going to take us back to the home page now what i'm going to do is add a few styles to make that 404 page look a bit better and i'm not going to create a module for this because it's only going to be two styles i'm just going to place them inside this global css file right here so let me paste those at the bottom like this so we're styling not found which is this div right here and we're saying align the text to the center and then the anchor tag inside that would give that a color and we say text decoration underlined so it looks a bit more like a link instead of this so let me save that and preview and that looks a bit better so now whatever url we go to doesn't matter what it is if it doesn't exist then we're going to get this 404 page instead and that's a bit better and you can make it a little bit better if you wanted to you could maybe add a list of different links on here or some better message entirely up to you