Next.js 13 - Layouts and Pages Explained in 20 mins or so

have gone guys PewDiePie Captain messing up the intro so many times but look at that I'm married now you boys buried that with the support from my wife so how's it going in this episode we are gonna take a look at all the different pages in next 13 um because there's quite a few of them and you know everything really changed with next version 13 compared to 12. so I want to show you a wee example of all the different pages that you can use and I threw up a wee example as well which is quite cool now I'm gonna post up on GitHub so here it is here's the page I made cool and I colored all the buttons differently for uh for the visuals because everybody likes colors okay so here's what's going on I'm essentially fetching some data from the Internet Movie Database right and by default ever so by the way everything is servers I rendered here just so you know uh if I click on fetch movies here as you can see we get the movies that's super cool um but one of the issues with this is that you might have not known is if we just slow down the speed here so if I just head over to network really quick quickly and I'll just add the 3G here right so slow 3G we can even do a fast 3G so if I click fetch movies here as you can see one of the problems is that you're not getting any loading um and if that request lasts a bit long it's quite weird for the user experience because they don't know that anything's happening now after that the page is cached so it's easy to go back and forth between it which is quite nice right let me close this up though um because I want to show you how we can fix this so I threw together another example here with fetch movies with loading TSX so when we click on this I added a fake delay here and as you can see we got a nice skeleton screen and we instantly go in that page all right so we're not getting that weird like hey what's what's actually going on uh that's really cool again this is a fake delay here so it's not gonna last that long it's just as an example to illustrate the loading page here okay cool awesome and next up we have the error page as well so if I click here and the fetching failed somehow and we're going to be presented with the screen here and then we can try fetching it again if we click this try again button and if there's still something wrong with the servers we can just go back home like that and I also want to show you if we try to access a page that doesn't exist so in this case a not found we can also display a custom page for that so let's head into the codes and see how it goes um so let's head back here let me close up this server that we just had so I just have a fresh installation of next.js here all right by default the way Pages work is let me stick this here cool as you create this page.tsx file right so we have hello next 30 in here all right so if you want to create another page just name it page.t sex again and the route is being dictated like the name of it by the folder so by default if I just go to localhost 3000 right that's going to render out my home page right here so if I want to create a another one I can name this let's see dashboard right so I'll just make a folder with the name of dashboard and in here we can create another page.tsx cool and then you can just like copy over everything and if I change this to a link dashboard and I'll just render out the dashboard like that okay so that's how simple routing is now you just create a folder with the name of of of the route that you want to go to and after that you just create a page.tsx on the inside [Music] cool so if we navigate over here and I just add a slash dashboards you're gonna see that our don't work that work what should be in the don't work it's my first example and it's broken dashboard okay there we go dashboard all right so cool and if you want to navigate between the pages a simple thing that you can do is just import link from next.js right so you'd go up here and import link from nextges and then if I want to head over to the dashboard I can do just that and need to close up the tag here because there's no way for me to navigate back dash board cool I hit save all right so now if I click on dashboard Boop we are on dashboard page oh and if you also want to do like uh sub routes then you can just keep going like this so on the dashboard I make like a user where you have a page as well right page.tsx so if you want to access that you'd go over to localhost dashboard slash user right so you can keep stacking them together like that as well now for the second one we have layout and layout essentially wraps around all of our different pages here as you can see it wraps around children and again that Stacks the same way so if you create a folder you can add a layout in there as well but this is a great place to add your fonts it's a great place to stick a nav up in here um it's also a great place to just add some styling so I can go here and say mx12 and then on large screens I can do MX of 24 right and let's hit save I might need a refresh there we go had a little 13 and if I go to the dashboard it would render out the same as well now I want to show you something in my util here I have a get movies here and I'm just quickly gonna go over what I did here essentially what I did was I'm I'm fetching some movies here right from the movie database and I added two more parameters in here one is a time just so I can add a fake delay and to illustrate some of the problems and not to illustrate some there's no problems but the fake like a loading time right from an API Fetch and I also had that they should error here just to fake an error message and just so I can have the ability to throw an error in here okay and that's essentially it so what I'm going to do is just go here to my home page right our root page and I'm gonna just copy over some jsx here and I'll show you what it is all right so it's just gonna be a link with different um buttons here so it's going to be a link that's going to go to slash movies and this is going to be just a fetch movies uh I'm gonna make another one movies loading one called movies error and one called movie not found all right so we're just gonna recreate all of these pages right here um okay so let's start off with the first one let's go here and create a new folder called movies and if I make a new file called page.tsx you're gonna see that this is gonna render out now expert defaults easing function movies there we go um and let's open this up and then we are gonna return something here let's just add a hitch one and say movies fetched let's just see if that works so if I click here boof movies fetched awesome but I actually want to get the movie so I'm gonna go here and say cons movies equals to wait get movies like that we're gonna import that and I also have some types on this I'm just gonna import those as well I'm gonna say movies type like that cool okay so we have our movies and now we can render them out on the screen again I'm not gonna bore you with a HTML here so I'm going to just paste that in but essentially what we're doing is we're passing down the results of of the movies and this movie list component which we don't have um but we're gonna make it so in the app here I'm just gonna make a new file and call this movie and list dot TSX cool now here we're gonna say use client like that at the top I'm going to say import image from next image and I'm also going to import the movie type like that cool now to render this out on the screen we can do movie list is equal to and here we're gonna have access to the page and results and then we have the movie type down there and here we're gonna return whatever we are gonna return and the thing that we're going to return Oh by God go in between it's gonna be a fragment in here and I'm just gonna Loop over all my results so I'm going to say results the map and we'll should have all the movies in here and then in here we can return something but I'm just gonna get rid of that as well and just do parentheses so we don't have to actually write return Okay cool so here I'm just mapping over everything and I'm just gonna render something out of here again just the div with the movie ID and I'll pass in the original title and also an image all right and that's it cool so now in here I can import the movie list so let's do that [Music] oh I never ended did I actually export this out I never did export default movie list there we go let's save let's go back here and see movie list from movie list awesome all right looks like there's still some sort of of error movie type oh it's movies type that I needed to import silly me there we go I've fixed all the typescript errors then we click here and we get this error message and that just means that we need to go here to our next config and just quickly add uh the images like where the actual images are originating from uh we just need to pass and add the Internet Movie Database in here like this all right let me remove that so images domains we just need to specify that the images are coming from there I believe with the new next version you don't even need to restart your server as well and it works look at that so we're loading up the movies without any loading TSX all right so just to recap uh we are fetching some movies from the internet database here and a server component and this gets passed down to our movie list here which we are rendering out awesome so again the problem here being that if we click on this as you can see we're not getting any indicator that anything's loading up and then the the page just pops up all of a sudden for us so what we can do is we'll make a new one so that's movies we're gonna make a new one called let's see what we named it here movies loading so again it's going to be the same thing from now on so we can just create a movies loading like that cool and in here I'm just going to create another page.tsx and we can essentially just copy everything over from here and paste it in here like that cool so let's hit save the only difference between this page and this page is that this folder with the loading is also going to have a loading.tsx in it all right so let's add that loading about the SX and here we essentially get to make our skeleton page so we can do export default function we can call this movies loading or something right and here I can just return a div and I can say H1 loading and hit save right so as you can see when we go here it's normal but when we go here uh we should be able to get the loading maybe we need to do a restart not sure you'd never do with next 13 what you need to restart and what you need don't need to but hopefully this will be fine okay cool so click here click here as you can see we have a flash there and the loading popped up but if you missed it what we can just do is go here and add a delay so you can add 1500 and let's hit save and try that again so again if I click here look at that loathing awesome now if if you want something fancier of course you can make like a skeleton like I did uh so I just made like a wee fake array here and I looped over it and I just added some styling and I also added this anime pulse here that tailbone provides you so if we click on this one now see it still shows loading I think as it's cached so if we refresh look at that we get a nice loading screen popping up here like that but Ed what if I have an error I fetch some data from an API and I don't want to display a crappy message on my screen so how can I not do that let me show you come to the codes um okay so what we can do is let's make another one so in our page here we have one called movies error so let's make that one as well movies error again I'm just going to copy paste this over here because it's the same essentially but the only difference is I'm going to make a new file called error.tsx like that all right cool and the way this works if we head over to the docs and you're gonna see that they give us this client-side component that we can copy and paste in and I'll explain the code as well so paste that in there hit save and we are good to go now when we click on fetch movies with error TSX you might be presented with an error and you're like hey what should be that doesn't work I made my error TSX file there's this weird bug happening now from next version 13.2.4 and up where if you export a client component with export default function like this it's going to throw this error uh not sure when it's going to be fixed but a quick fix for now let's just turn this into an arrow function so what we can do is is a const error and let's see here equals to that and here we are gonna have the arrows right cool hit save and then we need to export it as well all right cool so let's try that again and let's see if it errors out again so click and it doesn't error out which is what we want because we're not passing any errors yet awesome um but what we can do is let's close everything up let me go to my error page and we we have a delay added here let's add zero but I'm gonna add a error here and say true maybe false actually the way I made this okay how am I erroring this out what am I doing let's see should error here by default is false so we should make it true should errors should be true and safe let's refresh that and look at that we have an earth something went wrong try again so it does work which is awesome so if we head over here just to explain this really quickly and we're basically popping a use effect uh that's gonna cancel out the error for us and we can further display something on the screen here if we want we can save that in a state and output it here on the screen we can also as you can see they added the reset here in case it was just like a network connection and you want to give it another go you can hit try again but what you can also do is like redirect them back to the home screen as which is what I did so I'll paste this in and I'll show you and again the only difference is I style this up a bit and he added another link here in case the try again doesn't work this is always gonna air out because I hard coded the error in here uh but we can go back home safely and be fine with it alright so that's the arrow TSX and last but not least we have a not found TSX so the way we make that is in the root app directory here I can make a not found the TSX and again this is just going to be again just a normal component here um with some text on it again that's it take a look at that now very important you have to name it not found DSX like this all right you gotta make sure to do it like that so now that we have this you might be like oh I can just go to another route here and hit save and look at that page not found so that works awesome uh if I click here as well though look at that it's not loading anything up only if I do a refresh of it all right so just like a an FYI if a page doesn't exist and you're trying to navigate over it with a link tag it's gonna just throw in it's just not going to render anything out unless you refresh it I'm not sure if they're gonna fix this as well uh probs but for now what you need to do essentially is call this not found function that they provide you and with that it can trigger a not found page for you so to do that let me just show you a super simple example so let me just see where we're navigating over here so on our page we are heading over to movie not found all right so I'm just going to create a movie not found like that cool and then here I'm gonna make a page.tsx like that and what I'm going to do is let me just show you this quickly I'm gonna do an export default let's say I want to fetch a random movie all right maybe it's in that Dynamic route or maybe it's a user dashboard and I'm trying to get a user um so you can display like a not found if the user wasn't found uh but in this case I'm just gonna do a funny thing here okay don't kill me I'm gonna say can't get movie I'm gonna set the sequel to an async function here all right I'm gonna say cons response equals to weight fetch I'm just gonna go over to a Json placeholder here and fetch a to do like that okay let me close this up so you can see all right so just do an a to do Fetch and at the end of this I'm just gonna check if the response is not okay then do a console log not found like that all right just bear with me for a second I know you're like oh hell this is taking forever Ram's not Json and cool all right so I'm just fetching a to do here I know it's not a movie but whatever it doesn't matter um okay so now if we click here we are rendering out a random movie let's save okay run the movie cool but what if the movie doesn't exist so let's go here and do like that hit save fetch a movie and as you can see we don't get anything but the thing is we are not doing anything to really handle this so I mean this could have failed but we don't care right so what we can do is go here to the top and import the not found feature from next navigation so let's do that from next navigation and if a response doesn't go the way we want we can just throw that not found right here which is gonna again rent route um the root not found that you have all right so let's click here and do the mark I hate that there we go just needed the refresh but as you can see now when we go here it says not found now if you want to display a different kind of not found maybe specific for fetching a movie and the not found in here and then it's gonna try to render that out it's always going to try to render at the closest not found that there is to it but if it doesn't exist in the specific folder then it's going to reach out to the root directory and find a not found there all right all right and that's it so hope you learned something new if you did drop a subscribe and also check out the course that I just released recently called the full stack next course that's going to be in the description until next time foreign

Channel: developedbyed

Views: 92,168

Keywords: next js, react, web development, next 13, full stack react, layouts, pages, next pages, react tutorial, next js tutorial, next 13 tutorial, Next.js 13 - Layouts and Pages Explained

Id: zbYBgy_ChGY

Length: 21min 12sec (1272 seconds)

Published: Tue Apr 18 2023