Next.js 13 Crash Course | Learn How To Build Full Stack Apps!

okay I look like this because I have a cold and we've been in the car crash yesterday which is quite funny but we're all fine so thank God okay we're gonna do next 13. I want to take this travel in a fun Direction so we're gonna do loads of full stack development from now on we're gonna do next routine which is now and then we're gonna start building full stack projects with postgres and Prisma and trpc and all that good stuff but for that let's just take a quick look like an hour long crash course on how to work with next 30 and all the different changes and features and whatnot so I'll try to cover as much as possible in this in one hour but just just for you to know uh my full stack course is gonna be re-updated with next 13 Prisma postgres and all the good jazz uh but yeah excited to to go hope you are too let's go alrighty so let's get started with next 13. so the first thing we need to do is just get this sucker installed so they released actually a beta docs here that you can go to if you go to beta.nexjs.org all right and here we can run this installation somewhere here we go installation if you click here we can run this command saying MPX create Next Step at latest so that should be fine you can add the experimental app to get the latest version of it so I'm just going to copy it over just so we're ahead of the curve and let's paste that in to our vs code cool so we're going to hit yes and we're going to name our project let's just say next 13 experiment like that we can add typescript as well now I'm not going to add it for this project but typescript is coming soon okay I'm gonna make a video on it and then the future projects that we're going to deal with next and also the course that I'm gonna update is gonna have typescript as well so I'm gonna say no no for ES lint as well and know for the source directory because we are going to be using the new app directory if you don't know anything about it don't worry we're gonna cover it cool okay so import Alias I'm gonna also tell you what the hell this is but we're just gonna hit enter for now all right and there we go I really like next 13 to be honest and all the improvements that happened since uh next 12. there's still quite a few bugs in it so um I'll try to illustrate some of the bugs if not in this one at least in the next video but hopefully they'll get fixed by then so anyway cool so now that we have everything installed we can go over to CD all right to go into our new directory so that is what is it next 13 so let's do CD next 13 experiment there we go now we can do code and period to open up the window with the project okay optionally you can just navigate over like that but we will do the GUI version of it we like to do the terminal version of it because we're hackers got to have it okay cool so let's look at the file structure and see what the hell is going on here okay so we have a readme right whenever you put something up on GitHub uh that's gonna show up as your text there alright so if you want to edit it let me show you real quick because I pushed up this project here we go um so it's YouTube next 13 if you want to check out um the GitHub for this so anyway that's the readme right cool if you want to update it update it it's just a markdown file so that's all okay next up we have our package.json this is where all of our different libraries get installed and as you can see now it comes with next font uh we're gonna see what this is but it's one of my favorite features of next all right it's a package log Json pretty much the same it's just locking all the packages and then we have a config file here it's using the app directory as you can see which we're going to cover in a bit then we have a json.config file and again we're gonna see what this means in just a bit okay ignore just stuff that you don't want to push up on GitHub including environment variables which we're going to see in just a sec public this is where you put all your images your svgs and whatnot then we have Pages now this is now we're just going to use it for the API here and what essentially let me let me bring this page here why essentially this API route is going to allow you to do is to query data from a database for example do off in here on the back end so you're gonna see it used uh I'll make another tutorial where we Implement server side rendering with next off uh on the server right and we're going to be using server-side components if you don't know what any of this means don't worry I just realized how complicated it sounds okay so let's just leave it for now but anyway we can query data from here from a DB and in our full stack uh course that we're gonna do I'm gonna remake soon we're gonna be using Prisma to do that okay then we have our node modules which is basically where all of our packages get installed and then we have our app folder and this is where we Define our pages so let's see what we have all right so we have a page now like that and let's actually run this command so I'm going to say ampere and run Dev cool so that's going to open up a development server and if we click on that that's going to open it up and here we go that's what we have all right I'm gonna probably just put it on the side here so we can see everything that's going on cool okay so let's get rid of everything okay so let's go here to the main section of this home and just get rid of that class and then just get rid of absolutely everything like that and we'll just add the H1 here saying hello next 13. with a fire Emoji cool okay now if the jsx for some reason is not working uh you're prettier and code formatting and all of that stuff make sure you click down here and you search up JavaScript react all right JavaScript react and click on that and then when you do a div in here it's going to recognize it and it's gonna work um another way to get around that is to name your file jsx rather than just JS because if you do it with JS then you're gonna manually probably have to do it or associate it in the settings anyway who cares um Okay cool so that works okay so basically the way it works now is in the app directory you make a page.jsx and that's gonna go that's gonna load up basically the root uh path to this website all right so what if I want to go for example to slash uh about right that's like a common one that we do so rather than making uh like about the jsx that's not gonna work anymore what you need to do is make a folder with the name about all right so we're gonna say about here and then in the folder you'd make a another page.jsx all right so all your pages are basically named page.jsx so you do an export default function let's call this about and then you return whatever that you're going to return I'm just gonna say about page Okay cool so then when you save and you go to slash about now you have the about page all right so it's much nicer like this because of the additional uh default uh helpful components that come with this right besides page for example you also have layout and what layout allows you to do is to basically wrap all of these Pages yeah with a layout right so let's say I want to have a nav across all the pages or a footer across all the pages well then I can do it in this root layout now if I want a custom layout well you can just Define a layout in the about now and that's going to apply to that specifically but I'm just going to go to the root layout here and then let's I'm just gonna illustrate this We're Not Gonna use it enough for this one but if I want to have a let's say a nav I can just do it here and say H1 and then let's see we have a logo in our nav and then you'd have like a UIL with allies and a text that just say uh let's see take takes us to the about page or whatever okay anyway we're not going to use it but for this project at least just want to show it off to you and as you can see we are on the about page and we have a logo and about let's add another one here just to make it extra clear sign up okay cool so let's head back here to the home page it looks like we have an error so let's see what's going on there uh console okay what's wrong with you it's a big one okay so I think the problem is that we haven't added it to to the body right so let's go down here and just add it to the body cool up paste it in there and that should be fine okay cool so no more errors okay so of course the content needs to be in the body that's why it failed now what's this children well you can imagine this children as we have the root layout and we're importing a prop here and this children all it is is each individual page so the about page the home page so we're rendering it out here no matter how much content we have but we also add the math every time so now when we go to slash about like that boom we still have that being rendered out on every page now if I go here and add a new file and we call this layout.jsx like that uh I'm gonna just quickly show you here uh dupe their documentation is quite good uh even though it's on beta so as you can see I can just search layout so if you want to do another one you can just do this right the an example for the dashboard um and you just do an export default function dashboard layout you export the children and the props and just pass it down like that and then you can do another wrapping all right so that's it cool all right there's other files though so let's take a look at those let's delete this layout we're going to take a look at head all right so essentially if you want to add your metadata here link style sheets add titles add description add SEO you can do that in the head and you just create a head.jsx add your content in there and that's pretty much it if we look in the layout right you don't even need to add it here it's just automatically going to recognize it but they did add a little um a little comment here saying head will contain the component returned by the nearest parents okay so if I want to have different metadata for this one oops let me just move this here okay I may need to restart the server I'm messing with the files okay so anyway here's the head so let's make a unique one for this so I'm going to just call this head.jsx right I'm just gonna copy this over from here to this hep.jsx and I'm just going to change this to you about page like that just to show it to you that it works all right and then when we go to slash about and look at that about page all right so super easily can add different headers to your pages like that okay so next up we have another special file that we can call error.jsx and this is really cool so what you need to do I'll paste this in here and I'll explain later okay so you basically export default a function called error and you gain access to error and reset here as your parameters all right and then we can return any message that we want let's see this ain't loading up and then you can output the error message as well if you want and then we have a button that says on click and we'll do a reset all right so this is something that next automatically gives you that you can try reloading that component if there's an error so you can imagine you're fetching some data from an API or something or you're trying to retrieve data from your database and something goes wrong so you can catch that error on this error page here and then you can try reloading the data if you want in case it doesn't work now what's cool is that next automatically does a couple of tries and a couple of fetches before it eventually gives up and says okay well let's I just ain't working okay so I'm gonna need to throw an error page so you can do that just by adding an error.jsx making this function and that's it what's this use client don't ask about it I'll tell you in a bit anyway so now let's say in the about component I control fake error saying you uh let's say tro new error okay whatever we can add the string in here failed to load data cool okay and when we go here as you can see we get our error now this can be a full page so you can customize it and make it nice but it says they say load it up failed to load data all right so it's working we're sending the message through from here all the way to our error.jsx the error goes in here and then we can reload the data here reload like that so if we click on this boom it tries to reload it in this case I'm always throwing an error so it's never gonna work but that's essentially it pretty cool now another thing that I want to mention is there's another file called loading the jsx and it pretty much follows the same format if we head over to the docs and let's just export default function loading and here again you can do like a loading skeleton if you want I'll just do a div with a H1 sync loading dot dot okay but again you can customize it just like a normal page so now if we go here let's see if we can see it and I have over to about now you cannot see it damn it I think it's it might be too fast you can try it with the network uh requests but anyway it should let me see can I slow this down let's head over to network and we'll just turn this little 3G on like that so let's go over to about and did you see it I I don't think I even see that but anyway it's there trust me you just add the loading and that's it cool okay so let's turn this back off no Trot link cool okay let's actually build something out and then you can actually see how everything works together uh in a nice way okay so let's start our project oh my gosh I've been talking for 24 minutes and the project hasn't even started yet okay so what I want to do first of all is ADD Tailwind to this project so how do we do that well we can go over to tail one CSS and they recently updated their docs to use next 13 so if you go over here to framework guides you can hit next JS and then here there was another button I promised that said oh specifically for Dexter team but it should be the same so let's copy these first two commands over and paste it in here I'm just gonna remove some of this let me cancel out of this actually no new new um oh where was it I know oh sorry this is initializing the project here we go it's this line down here all right so install Tailwinds CSS post CSS and auto prefixer and then we're going to initialize a Tailwind file there we go so there we go and then I'm just gonna copy this content over and paste it in here content here we go so I'll just replace that like that so essentially what this does is it's going to look for all the files in the app directory Pages components we don't we don't use this really anymore but it's gonna look at all the JS DS jsx files and TSX files and it's automatically going to recognize Tailwind in it and then all we need to do is in our globals.css add this line here at the top like that and that should be it we should have Tailwind going so if we do npm run Dev we can close this up we should be able to go to pretty much any page so let's go to the home page like that cool so if I want to make this a bit bigger I can do text large there we go some padding um there we go and I can do uh I don't know so margin four okay it works cool perfect all right so we have Tailwind up and go and let's see what do we need next [Music] um oh yeah I want to show you the font feature in xjs that's pretty cool so what we can do is literally just import any Google font now very easily by saying Imports and with curly brackets you can do let's say I want to use huh what should we use for this project let's do let's just get rid of everything here like that and we're gonna use this one font across all the pages we can remove everything here actually from the home page clear it up nice and clean cool okay so what we're going to do is go to the layout on the root folder here right um and I'm just gonna import the font so if I want to import any Google font now you can do Monserrat for example from at next font like that cool and that's it you don't have to do any crazy wiring and hooking everything up and then we just Define a variable like that and just call this Monserrat from Google from next spawns and here we can Define like an object with the weight for example so if I want 400 I want uh 700 all right that's bold cool and I can also specify subsets which basically means well I want the Latin version if you want uh different types of characters you can specify that here okay it says module now fine so what you're on about let's see oh from next here you need to specify from Google Google okay cool and then to actually make this work all you need to do is go let's go to the body here I'm just gonna add it everywhere I'm just gonna say uh curly brackets back decks and I'm gonna say dollar sign curly brackets Montserrat the class name all right so that's how you add it hit save not working very cool what did I mess mess up the name of it here we go save boom look at that we have our font so that's pretty cool now what if I want to hook this up so it works with Tailwind well all I need to do is add a variable here and call this whatever I want basically but I'm gonna call it dash dash font Dash monster rot like that and now we can go over to our Tailwind config and we can add additional functionality to it in this extend so if I want to do a font family here I can just say Monster Rod here is gonna be VAR dash dash font Dash mod it's a rot like that sorry I'm still a bit sick so my I'm having a bit of a trouble breathing so you might hear nasty noises I apologize for that okay so that's how you hook it up you just add it and be fun I can't breathe I just added in the font family here and then wherever you want to go in your code and change the font so you can hook up basically loads of classes here right uh the classes fonts you can hook it up to the body here and then wherever in your code you want to add a specific one you can do class name font months right now seeing like that and that's going to apply it this is going to apply it by default to everything but if you have let's say two of them here right you could have Montserrat and Poppins you could hook them up and then you can specify like which one you want to use down here but we're just gonna keep it like Global no it's fine I'm happy with just one font anyway so we have our fawns going so that's pretty cool feature and next to our team I really like it next up let's uh work with some data let's use an API or something so we're going to use I am I'm not IMDb by the way have you guys seen uh Last of Us uh we're watching it it's really good isn't it first two episodes and I think it's just as good as the game anyway the movie what is it called there we go the movie database all right make an account on this and uh we could fetch all the latest movies and trending movies and there it is there it is uh make an account here and then you can head over to settings and you should have API down here and then we can use this API key to actually get stuff from the database so make sure you copy this over okay now this don't use mine I've got the delete Vine make sure you use yours because then everyone can access like if you're using it in your own project let's say you make an account you want to make sure this data is hidden and sensitive because if people have access to this then they can use your account to request all the data for the movies especially if you have a paid subscription so sensitive information like this usually goes into a file called the local.emv the local dot EMV all right so basically you add that in here and this is only going to work in your local development but let's say when we finally push the code up into production it's not going to know what your variable is anymore so you're going to have to manually add it and I'm going to show you how to do that but for now let's just create a variable here an environment variable I should say call this API key and set that equal to and paste in that code cool we might need to restart the server I'm not sure but let's just do it cool all right so now that we have our API key let's go to our page our home page here and then what we want to do is actually try to get the movies all right so fetch the movies so the so let's go over to their docs here I know what it is but I've got a I've got to just go with the flow here fake it act like I don't know where it is okay let's head over here oh I can find it I actually don't know where it is okay here API oh I don't know where it is joke zombie guys jokes that'd be the Internet Movie Database let's search API I know they have like actually they have a page specifically for devs I think this is the one mm-hmm there we go it's developers.movie database.org cool okay so let's say I want to get all the popular movies that are coming out cool how do we do that well I think you can just do a search here so let's do a search and do it looks like they're updating their docs uh let's do popular look at that movies get popular movies so all you need to do is let's see where it is it should give us a string on how to actually execute this oh you just do slash movie slash popular like that but they never give you the full text looks like it but I know which one it is so it's this I'll just paste it here um okay so it's that all right so make sure you always add this HD API slash Movie Database org slash tree and then you do slash movie popular okay okay so how do we fetch data and next 13 well let's do import use effect write and use State nope nope we don't do that though both so if you learn that too bad I'm joking we still use it but I'll show you how so by default every page is a server component and a server signed rendered so what that means is all the data is going to be fetched on the server and when this page comes back it's already already it's already gonna be fully rendered out for us uh so what does that mean we cannot add interactivity to this so if I want to do an on click like that whatever I could just run like a console log here right hey cool oops hey okay so that's not gonna work but then I ring out for me should error out oh there we go it failed Okay cool so by default server components now can I use on click or just if you want to work with the window right if you want to use use effect if you want to use use State none of those are going to work anymore it's gonna error out so as you can see if I get rid of that it's going to load up again but if I import uh use date okay cool both error needs to be a client component so whenever you want to make a client component you just need to add use client here at the top and that is going to work just fine all right um so the only time you want to use use client in my opinion is whenever you want to do an on click whenever you want to do a uh use State use effect but generally speaking now when you want to fetch data you you want to make sure you do it in a server component just because it's going to be much better in terms of SSR so let's get rid of this and the way you do it is previously in next 12 you need to do get static props whatever you'd make a new function here but now it's super simple you can just fetch the data here normally so I can do const data set this equal to await fetch all right I'm going to the fetch to this URL that we just got but I'm not going to do normal text here I'm going to do back text because I'm gonna need to add our API key here okay so we're going to do https I'm just gonna manually write this out API dot the movie db.org slash three slash movie slash popular okay cool and now what I'm gonna do is add a question mark API key like that instead that equal to curly curly dollar curly crap okay and then here I'll just add my API key now where is that it's in our local EMV file okay so to access that variable all we need to do is say process now EMV Dot um what did we call it let's see API key cool there we go and that should be it so that's my fetch right there that's going to error out why well it's because we're trying to do a weight here but this function is not async so that's the cool thing now you can make this function async and then boom it just kind of works I can get the response here and say await data.json and that's it I can use it anywhere so I can do console log res let's take a look at that and take a look if I open up the oh it says API key is invalid okay oh I'm so dumb it's not working why is it not working because I'm dumb here's why I'm dumb it's the emv.local oh my gosh the EMV the local Okay cool so that should fix it let's restart the server and see if that works okay console log rest so now when we go to this page look at that we get all the movies in our little terminal here so awesome and basically the way it works let me scroll all the way to the top just so you understand this API but it gives us an object that has a page on it and then a result which is an array so we're gonna have to access this results and here's where you have each individual movie and they have an image to it uh title right and then the poster path release date whatever whatnot okay so to actually render this out uh we'll just make a new component that's specific for uh uh having each individual movie here okay so here's a great example of how to continue from here because I'm gonna map over all of these movies right I'm gonna have a movie here so div and H1 let's say we have a title and whatnot right and I'm gonna render loads of these out uh okay I'm just gonna show you the problem here so res dot results.map right we'll map over each individual movie cool effect that's not the way to do it that's the way to do it okay anyway all right we render out each movie like that see cool let's update this I think it's like movie movie the title cool okay yeah it works cool but let's say I want to click on this right and then it's gonna open up another page with the movie details okay well cool if I go here and then add an on click and then I want to let's say navigate over to wherever right well that's going to be a problem because now on click's not going to work in this component because this is a server component so remember you cannot do you state use effect on clicks getting the windows stuff like that all right so that's not gonna work so you can still get the functionality you can have a server component and then just make a new component in here in the app directory that's specifically a client component that has that handles clicks and stuff like that so what we're going to do is just go to the app and then just make a movie.jsx here all right and I'm gonna just do an export default function function movie like that cool okay and then we're gonna return let's do a div here we're gonna do H1 we're gonna just have the title in here all right I'm just gonna add title we're gonna have a release date I'm just gonna make a super simple UI and next up actually we're not going to do an on click here but we're going to import a link all right from next link and now this has been updated as well where you can just say link like that and you don't need an anchor tag in here it's just a link now where you can add a href to a location so I'm gonna just say slash whatever I'm just gonna add something random here we're gonna update all of this um and then let's just have an image here and we're gonna update this as well with the image stack from next well let's just let's just keep it like that for now Okay cool so now rather than adding our own little div here we're just going to go to the top and import movie like that cool so now let's just render out this component here movie and now I'm just gonna pass a bunch of stuff coming from this API so you can follow along here if you want to look at the data again it's console locked here so feel free to check it out uh but I'm going to copy these over and feel free to paste them right here so just the key which comes from movie ID an ID title poster path and a release date that's all I'm gonna get okay let's copy these over perfect why is this rendering out twice let me do a refresh here okay cool am I rendering it out twice no I'm not let's go back here to the movie now and just add all the necessary details that we just imported so title uh the IB poster path and release date cool okay so let's let's style this up a little bit now so here we're gonna replace this with the release date now cool that works the image here we're just gonna say source and I'll do poster path and it's not gonna work why if you check here poster path or backdrop path or whatever um did I say backdrop graph here movie the poster path oh we have a poster path cool it doesn't give you the default URL the movie database slash the picture so we just need to add that here unfortunately at the top so let's just make a variable up here I'm just gonna say image path oops there we go const image path and we're going to set this equal to https this is in the docs if you if you want to if you want to get it I'm just going to type it out for you so it's a bit easier all right so basically we need to do this we have this link here and then it goes to slash poster path whatever number okay so we'll just keep this here and then we'll do basically image path Plus or path like that and that should load everything up for us now we might need the slash here okay it doesn't look like it's loading up that's not good use do we have an error let's see oh yeah we have an error was this what is this um okay the work it don't work let's try the console log out the poster path let's see do we get that poster path we do so that's good news that's great news uh why is this now rendering out image path poster path well anyway let's just use the image from next.js anyway because this is what we're gonna go for uh next image like that this allows you to compress the images customize them render them with priority in case they're on the first page and loads of other functionality that's really good so let's just add image stack here rather than a normal HTML image and we can actually just shorten this like that and have itself close and then we have a source image path Plus poster path cool and as you can see we also need to specify a width and a height to this now you can do you can do whatever you want here 800 height 800 because we can further customize this with Tailwind so it doesn't really matter so if it needs it then add it and then the alt tag is going to be just the title here okay I know what the error is now so basically you need to add [Music] um you need to add the movie database as a host name to the config file so whenever you're fetching images from an outside place right you need to make sure you configure it with next config here so let's head over to next config because next.js is going to take over and then try to optimize the image further from uh for you so we all we need to do is head over to net where is the next config here and just do images and say domains and then we can say image tmdb.org all right you could have like from Google as well or whatever I don't like to do this honestly I wish it would just do it automatically but it is what it is so now if we reload the page hopefully no we're still erroring out okay I also don't think I had this correctly for method here so make sure I think that's why it didn't work originally uh make sure to update it to this the image path wasn't correct cool so now that the average path is correct look at that we are getting all the pages loaded up cool and there's our image as well lovely all right so that's fantastic now what I want to do is essentially just kind of make this like a grit system so we can head over to our page thaw jsx here and I'll just add some class names to this so uh I'll make a div on the outside and just wrap this content up here for us like that and I'm gonna go here and add a class name of grid and a gap of 16 and hit save and now I want to make this fluid but there's no nice way to do this so I'm going to extend our Tailwind config here if we just head over here for a second I'm going to add a custom one called grid template columns like that and I'm just going to call this fluid and the way this is going to be is repeat auto fit min max 15 REM and one FR ooh sounded like a teenage boiler for a second okay so it's just the CSS property that's really good there's no simple way of adding it to Tailwind as far as I know so I just added here and then I can just go here and say fluid like that grid calls fluid and there we go and then we have a super simple grid system going on here which is really cool awesome so I can go even smaller and that's just going to make a one page like that and what else I want to do is add a bit of padding here on the left and right so I want that to have the same basically on all the pages so I'm just going to add it in our layout jsx so let's head over here and I'm just going to add an MX 48 or something here yeah maybe that's a bit too extra uh let's see 32 okay there we go and hit save and cool so now when we go smaller as you can see we have some nice margins on the left and right cool I'm gonna get rid of all this shite up here at the top so let's get rid of about page clear that up let's go to our layout get rid of this nav as well just to clean some stuff up there we go and then this hello next as well uh can bugger off so bye to be fair we could probably add a bit of margins at the top and bottom as well so let's do my like 12. okay there we go just so it's not all the way stuck up there at the top cool so we have each individual pages but as you can see when I click on them all of them are going to take me to ASD because that's what we wrote We hard coded the code here to every component to take us to ASD but we're gonna change this and just say slash dollar sign like that and I'm just gonna pass in the ID of each individual movie Click cool now we don't have the page here how do we make a dynamic page though because this is going to lead us to slash three one blah blah all right but I'm not going to make a folder for every number here so what we can do is essentially just add curly brackets like that square square brackets I don't know and just add whatever you want to add in here I can say ID I can say movie whatever and then in here you just make another page.jsx like that let me make this smaller because it doesn't matter that much okay so now in here what we can do is just say export default async function let's call this movie detail cool and let's return a div that's gonna say H1 movie detail all right so that's it so now every time I click on one of these links it's gonna take me to the movie detail all right so that's nice now what I want to do is kind of do the same thing is fetch the data in here for for each individual movie so what I'm going to do first of all is I'm going to copy over that path here all right this one you can copy it over as well and then I'm going to do another Fetch and again you can copy this over uh it's just gonna get each individual movies data description so that is basically slash movie slash uh the ID of the movie and then we add our API key now how do we get the movie here if I click on it that's going to error out it's going to be like well what the is movies well how can we get that well we can get it from the param so when we click on here see it's going to take us to that ID right from whenever we navigate over we're passing the ID down here so you can have access to that and params here all right and now if I just console log out and let's do params and you're gonna see it down here I know I'm constantly logging out every single thing it's a bit annoying but um there it is look at that so we have a params in the params we have movie with our ID so that's pretty cool now where where does this movie comes from well it comes from whatever we essentially named our our folder here so we name this movie if you can name it ID you can name it whatever we kept the movie okay so let's extract that so we can say const movie like that from params all right so we can just extract it and look at that it loads up fine now so this works just fine and then we can do a const response weight data.json just like we did before all right and now let's just kind of power through this and add some movie details here just gonna add another div in here H2 let's call this res dot title there it is we can add a class name to this text l that's too big for excel cool that's still too big 2XL cool put some boots and let's do H1 another H2 actually with a class and let's do the movie release Here release date like that I have the class name let's do text large on this cool let's do a run time and this is gonna be res run time minutes all right and there we go it runs for 103 minutes wow quite a short movie isn't it H2 and then let's do a res dot status here which is going to show us if it's released or not uh let's do a BG green on this of 600 there we go I'm gonna do an inline block so the width doesn't go all the way there we go uh margin y of two a padding y of two and a padding X of four is that gonna look okay yeah and let's round these coordinates so I'm gonna do rounded medium like that yeah not too bad and we can also make the text a bit smaller text small cool anyway you can add more margins whatever make this look really nice I'm just gonna keep it like that let's add our image down here as well so after this H2 Let's do an image from next cool and we need to make sure we import it as well lovely and then here we can just do a class name of margin 12. we can add our source which again is going to be image path plus rest stop oops plus res dot backdrop path like that okay and then we need to do the width and height 1000 height a thousand there we go there it is cool but as you can see if I make a bigger uh it doesn't go all the way to the end there so that's when I just like to customize it with my Tailwind here I can just say we we're full like that and there we go and now I can actually use this a thousand here to kind of control the quality of it so I can do 600 like that and look the quality is much worse so that's kind of how I like to use image like that and so since it's going to render out here on the front page I can add priority as well to it um so it paints it really quick anyway I'm gonna leave it like that and if you want to add more info here feel free to do it there's loads of stuff in here res dot overview if you want to know a little bit more about the movie yeah there's just anyway it doesn't matter anyway when we do server side components all right server components by default behavior and next is going to be when you go to one and if I go back see how it instantly loads up that's because it caches by default all of these pages so if I go here see it takes a while to load up but next time I go to it it's instant and when I go back as well it loads up instantly so that's kind of how how how it works by default it just caches everything but sometimes you might need new data coming in right so that's where you could revalidate um and just refresh the data for example on every every time you go back to the page or maybe in a certain amount of seconds so what you can do now is with next 13 the fetch API basically came with superpowers they extended it so for here after this argument now you can add a comma so inside the the function here right so at the end of the string you can add a next here sorry you need to make an object like that and say next and then here you can add a revalidate like that sorry this needs to be an object to revalidate like that and you can specify if I do 0 Here Again by default it just caches everything if I do zero then it's going to try to fetch the data every time uh when you go to the page all right but if you want a certain amount of seconds so let's see a minute then you can do it like that and then after a minute it's going to start refetching the data for you um but sometimes you might not work with fetch API um you might use something else like you might again we might do something with Prisma and then we go cons theta equals to Prisma sorry await let's say await Prisma Dot posts that are fine many whatever right well you cannot do a next here and then revalidate so in case you have something like that going on what you can do is just at the top of the file of the page or the layout you can do an export const revalidate like that and you can set it to zero or whatever amount of seconds all right now I found it quite buggy actually and it doesn't seem to work every time for me especially with Prisma if I'm exporting it like this didn't work properly I'm gonna look into it a bit more and tell you how it is but if you have errors going on there don't worry about it too much uh because it might just be next uh kind of having a bit of issues anyway so we got that working which is fantastic now what we can also do with these Pages here is render them static um so when we're pushing this code up to Versa for example what we can do is essentially pre-render these Pages out fetch all of these individual movie posts and just serve them static fully render it out and then we don't even need to fetch these data anymore every time we visit the page on our live production server so the way we can do that is using a Wii function called uh gets what is it called generate static params so let's go here to the top and say export async fog should uh my throat generates static params all right and what we need to do essentially here is we're going to fetch all the popular movies again from this front page right so we can copy over the code from the page.jsx our home page and then here all I'm going to do is return a red star results now map I'm going to map each individual movie oops and then return a movie with a two string movie dot ID all right so essentially I'm just getting all the IDS and mapping them over to our URL here so when we're pushing this code up to production what is it going to do is essentially go over each movie go over each movie get the detail sorry get their ID and then go over each one of them and render them out so if we take a look at a live you're gonna see it in a live example in a bit now let me just show you actually quickly so you don't forget about it because I'm talking about it so here we go Okay cool so take a look at this when I pushed up this code it's going to render out all the pages so it's going to load up now fair enough but when I click on this it's not going to do any network requests anymore these are pre-made already pre-rendered so when I click on them it just loads up like instantly which is really cool okay these there we go cool all right so that's kind of the benefits of this we don't need to do any more Network requests unless you have of course revalidate going up here okay and um yeah I think that covers up quite a bit of of next 13. uh again I'm gonna rework my course with uh our full stack course is going to include next 13 we're also gonna do postgresql with Prisma and stripe and it's just going to be much much nicer so hope you're excited for that but I I'm also going to do loads of uh full stack content from now on I feel really good about it so we're going to cover Prisma we're gonna do Post postgres we're gonna do typescript I wanna do trpc all that good jazz so yeah I'm gonna leave it here for now thank you so much for watching hope you enjoyed this episode and I'll see you in the next one Bye Bye Bye Bye driver oh I can't believe we forgot to push up the code so essentially to get the code up and running all you need to do is push it up to GitHub and then when you go over to Versa let me go here and versal.com cool so you add your new project here okay you select your GitHub page and then before you click run it's going to give you like an environment variable on the page so I can still add it here if I go to settings environment variables here we go and then you just add whatever you had here so API key like that and then you add your string and then you're all set to go and everything's gonna work just fine and again if we run npm run build here oh I should point out this we error message here before I actually get going they might error out we'll see they might have fixed that data never mind they fixed it okay see I had that issue I was running an older version of it and essentially in development if you had this get generic generate static params going here it would error out so you'd need to comment it out specifically for development but it would run just fine in production seems to be fine though so okay I guess we don't need to worry but look at that all the movie paths here have a DOT there which means that they're statically rendered so that's pretty damn cool I'd say okay I'll see you in the next one peace

Channel: developedbyed

Views: 192,637

Keywords: react, nextjs, next.js 13, next crash course, react crash course, full stack app, full stack crash course, learn how to build a full stack app, dev ed, developedbyed, react js, react frameworks, javascript

Id: T63nY70eZF0

Length: 57min 56sec (3476 seconds)

Published: Wed Jan 25 2023