Next.js Not Found Page 404 | Next.js 404 Error | Next.js notFound Function | Next.js Tutorial

hello guys welcome back to this tutorial and today in this video tutorial we will learn about not found page in nextjs or we will learn how to handle not font page in nextjs so for example here we have defined a route segment which is publicly accessible for example if we go here and specify the URL path /blog you will be able to view or visit this route segment because we have defined here you can see now what happen if we visit the undefined route segment or visit the unmatched URL Let's see we visit this product URL which is not defined in our application you can see here so let's hit enter as you can see when we visit the unmatched URL we get this page 404 this page could not be found so to handle this kind of a not found page or error you you can customize or give your own UI Concept in a nextjs for that let's go to nextjs documentation and see what they are saying so here you can see the not found file is used to render UI when a not found function is thrown within the route segment so when we visited this URL and this route segment this route segment is not defined in our application so for that we can create a we can create a new file not found in a nextjs to show our own UI so it is saying at the AP label we need to create a file not found. TSX and this is the nextjs convention that we need to follow to handle the not found errors now let's see how to do that this is the AP label so here I will create a new file and the file name should be not found Dot SX or jsx or JS and in this file we need to define a not found function so right here export default function not found and then specify your custom UI that you want to s for the not found page so here I'm going to specify I will give H1 not found then I'm going to write some paragraph requested page does not exist like this okay let's write it does not exist now if you go back here you can see the page not found request page does not exist and this page and this UI is defined using this not for found TSX file in a nextjs and this file is defined for any nextjs not found error so if you visit any unmatched URL like a article something it is going to show the same not found UI that we have defined here so this is how you can handle the not found error at the AP level directory but you can also handle the not found error at a folder level or at a specific crout segment as you can see here it is saying not font file is used to render UI when the not font function is thrown within a route segment along with servicing a custom UI so let's see how to do that at the route segment or at the folder label now let's create a new route segment product and to make it publicly accessible we need to create a page. TSX file create a component product here write product or write a list of product like this now let's visit this route segment or URL product let's say that you want to view a specific product so from here we will pass the product ID like a 2 3 4 to view the product so for that we need to create a dynamic segment so as you know to create Dynamic segment M you need to specify a square bracket and within a square bracket you need to provide the folder name or the segment name which is a product ID in this case now to make it accessible create a page. TSX file Define a component and name it product ID like this now from here we will pass the parameter or value so we need to grab that value in this component so for that by default it provides a params props so write here params and then we need to also Define what kind of parameter value we are passing so here it is a product ID product ID of type string specify the colon now here we will print the product ID so the product ID is then write here params do product ID now let's pass the product ID like a f now you can see we have successfully received the value from the URL in our component now let's say that uh if any user uh try to find the product ID greater than 10 then it must so not F page so for that here we can specify the statement if pars and params do ID is greater than 10 then it must return not found error and we are importing this not found function from the next navigation so this function Returns the not found error let's go to the website and from here we will pass the product ID 11 as you can see it shows the not found UI which we have defined in this not found TSX file but we want to show a specific UI for this product route segment so for that here we'll create a new file in this product route segment and the file name should be not found. TSX then export default function and name it not found after that here return Then specify here H1 and give a title product is not F and give here paragraph P the requested product does not exist let's remove this line now let's go to the web page and you can see it is showing the custom UI for the not found page that we have defined here in the not found. TSX file at the route segment label or at the folder label and it is not showing the UI from the not found file which is defined at the AP level folder here so let's give another uh ID like A45 and it is working well now let's remove this product segment and specify any unmatched URL and see which not found file is get executed for the not form error now here specify five and you can see here at the AP level when you specify the unmatched URL the AP level not found file is executed which contains the custom UI we have defined in this not found file here you can see so for a route segment or a folder level we can Define the specific not found. TSX file to handle the custom U UI for the 404 not found page so I hope that you understand how to handle not found error in next JS how we can uh use our own UI render our own UI for specific route segment whenever the not found error occurs whenever the not found function throw error in any of the route segment or at the AP level also so at last I want to say don't forget to subscribe my YouTube channel and thank you

Channel: codingwithks

Views: 142

Keywords: next js not found page, next.js not found page, next.js not found page tutorial, next js not found page tutorial, next.js 15 not found page, next js notFound function, next js 404 error page, next.js 14 tutorial, next.js 15 tutorial, next.js routing, next.js app router tutorial, next.js programming tutorials, next.js params props, next.js web development, next.js 15 beginner tutorials, next js tutorial, next js 14

Id: 1r9isonUUf8

Length: 9min 2sec (542 seconds)

Published: Thu Jun 13 2024