Next.js Crash Course

hello everybody and welcome back to the channel in this video what we're gonna do is cover uh next js the next gs is a react framework now react itself is a javascript library that is built on top of vanilla javascript so what next js is it takes this react framework and builds on top of it and so we get features that we don't usually get in react when we utilize next now because nexus built on top of react we need to know react to uh well learn next so knowing a basic knowledge of react is a prerequisite to this crash course because i'm not going to be teaching you guys things like props and components etc but you only need a real basic amount you don't need to be a react pro so let's just get into exactly what we're going to be building with next so we're going to be building a very simple application so over here if i were to zoom in you can see we're building an application called cat world and what it does what this application is is a cat adoption website so over here you can see that you're able to start looking for your cat so if you click this button you go to the page where you start looking for your cats and then you can start looking at all of the different cats and you can see over here their contact information in order to adopt them as well as the email now what you can do is you can just very simply uh click on a cat that you like so so i'm interested in this cat you can click on this cat you can see over here the name of the cat and i don't know like a relatively long description now this isn't an aesthetically nice application to be quite honest but that's really not the point the point is to focus in on next and once you understand the next knowledge you can make the application very pretty now this is a relatively large application you're going to learn a lot of next concepts so over here we also have this nav bar that takes us back to this page so you can see that this is a multi-page application so you can see that and the data that we have here are they're not static data they're actually going to be served to us by a server now next js actually allows us to configure a server inside of our next application and so we're going to be utilizing that so that's pretty much the application and let's just get right into it let's now learn how to create a next.js application inside of our computer so in order to do this what i'm going to do is i'm going to go to next js.org i'm going to click on the docs and once you get to the docs it redirects you to the getting started page now over here you can see some of these system requirements let me just zoom in a little bit so you can see that the system requirement is you need to have node installed on your machine and it has to be greater the version has to be greater than 12.2 2.0 and you know this all works with mac windows and linux so that's really all you need all you need to have is node on your machine now in order to install a next project inside of your application you very simply have to open up your terminal and run this command npx creates next app at latest now if you want to utilize typescript with this you can also do the dash dash typescript we're not going to be doing this for our application so let's go over here and what we're going to do is we're going to copy this command so let's copy this command and let's go to our terminal so i'm going to open up my terminal i'm going to clear everything i'm going to make this a little bit bigger for you guys let's just clear this again bigger bigger bigger all right and so now in here what we're gonna do is let me just go a few levels up seems like i cleared it a little bit too much let's go here here maybe zoom in once more there we go so what we're gonna do is we're gonna execute npx create a next app at latest to get the latest version and then what we're going to do is we are going to give this next js app a name let's just call it cats app because we're we're creating a cad application so let's just enter this and now what it's doing is it's going to install the next js application and it's going to do it inside of the desktop directory now for me it's going to do inside of desktop because i'm inside of my desktop directory but whatever directory that you're in is going to create that in there so if you want if you want to create it in a specific directory just do a cd and then move into that directory so that application is done awesome so it's done downloading so what i'm going to do is i'm going to open up an instance of vs code so let's go here let's open up a new instance of vs code i'm going to go to open i'm gonna go to my desktop and i am gonna go to cats app so let's go here open that so let's just zoom in once more so you can see that we already have a lot of files and folders so you know there's just a lot of boilerplate that is already here we have this pages directory we have the styles directory we have this public directory we have a bunch of other things now what i want to do is i want to start my application so what i'm going to do is i'm going to go to the package.json and inside of the package.json we're going to run this so we're going to execute npm run dev and what this is going to do is execute next dev which is going to run our application in development so on in localhost 3000 so in order to do this for me what i actually need to do is close down my other application that i have running uh so that is do i still have that running let's see i do still have it running i'm just not really sure where it is so i'm gonna have to find that real quick and close it down i think it's this one so we're gonna go here and we're gonna just close the terminals so close this close this you don't have to do this step of course and now if i were to refresh now we don't have anything okay awesome so now what i'm going to do is i'm going to go to my terminal here my integrated terminal and i'm going to run npx run dev or not mpx sorry npm run dev so npm run dev and now if we go to localhost 3000 we should see this application right over here and this is the default next application awesome in this section of the course what we're going to do is build all of the major components inside of our cats app application so we're going to build to the jumbotron component we're going to build the actual pet card component and we're also going to build the nav component and we're also going to style these components and you might think okay well whatever but next.js actually has a different way that we can style our application now right now building the components is actually very very similar to how you would build components in react there's nothing really different about it so what i like to do is i like to just take a components directory and then in here i like to create a whatever that component is so i create a directory for that and then i create a file for that as well so over here we have a nav directory and then in here we have our nav.js file so in here what i'm going to do is i'm going to execute rfc and what this is going to do is create a function based component for me in order to get this you need to have this extension installed inside of vs code to go ahead and install that and if you don't want it to just write this out so in here we're going to create our nav components however i don't want to just create the nav component i want to go ahead and get it from a library so what library am i going to be utilizing well i'm going to be utilizing bootstrap for this so let's actually go over here and we're gonna go all the way to bootstrap and we're gonna go click on bootstrap here and we're gonna go to their docs and we're just very simply going to go to their components here we're going to click on the nav so nav bar and i just want a navbar that looks like this so what i'm going to do is i'm just going to copy this over here and i'm going to paste that in there so that i don't have to worry about you know all the styling myself so let's just go ahead and paste this and now what i'm going to do is i am going to go into my pages directory so inside of my pages directory we have this index.js file and what this index.js file represents is the page the component that we're going to render when we are in the root of our application so right now if i were to go to our application you can see this right over here and this this all this is stored right in here inside of the index dot js file so what we can do actually is get rid of all of the things inside of the div so let's go ahead here let's get rid of all this stuff so let's go here let's get rid of all that and then right in here we can create a main element so let's go here create a main element and we can just say hello and now you can see that we have hello over here now we'll talk about this a little bit later don't worry about it but for now let's just create our component so in here what i want to do is i want to render this nav component so let's go ahead and save it and then in here i'm going to say nav and auto import that in so as you can see it got auto imported let's get rid of this so we don't need that we're going to save that and you can see we have our nav component however these bootstrap styles are not being applied so what we can do is actually go to the next documentation and let's just zoom out a little bit and if we go over here to the built-in css it actually tells us how we can apply bootstrap into our application so if we want to get styles from the node modules let me zoom back in what we need to do is install that library which is bootstrap and then import that inside of the pages slash underscore app js file so first of all let's go ahead and install bootstrap so we're gonna go here we're gonna do an npm install bootstrap so once that installs what we can do is we can actually import this inside of the underscoreapp.js file and what this file is is the root of our application so anything we want to have access to throughout our whole application we're gonna import it inside of this file and as you can see here by default next has these global css styles that it imported inside of here so what we're going to also do is import the bootstrap styles because we remember we installed it so we're going to go ahead and save that now once we go to our next js application you can see that we have these wonderful bootstrap styles so you can see that they're actually applied at this point now one thing i want to do is i want to go to the global styles so in order to do that what we need to do is go to the styles directory go to global and in here what i want to do is i want to make everything margin 0 padding 0 and i want to get rid of everything else right over here so if we were to refresh we should see those changes awesome okay so this is terrific so now we have our nav bar that's awesome so now what we need is the jumbotron so let's go back to our components directory and then in here let's create a jumbo tron and then jumbotron jumbotron.js so what this does is it creates the directory as well as the file as you can see here now in here let's do an rfc and let's go back to bootstrap here and then right over here what we're going to do is we're going to go to bootstrap and then we want to find the jumbotron of course so let's go over here we want the jumbotron where is that um let's see i can't really seem to find it here so maybe we can just search for it so jumbo tron okay let's i think i can find it if i go to google and i say bootstrap jumbotron so if you were to click here you can see that we get this jumbotron so let's figure out the code for this so i want this fluid jumbotron so what we can very simply do is just copy this let's copy that and in here we're just going to paste that in so we're just going to paste that fluid jumbotron in and that's really all we need for this so now what we can very simply do is go back to our index.js page inside of the pages directory and then in here we can also apply the jumbotron so you can auto import that in and so now if you were to go here you can see that we have our nav bar and we also have our jumbotron and what i'm going to do is i'm going to go to the jumbotron and i'm also going to give it a margin top of five so let's go here and now you have a little bit of a margin so in here we can call it um we can call this application cat's world so you can call it cat's world and in here you can say find your new best friend best friend today adopt a wonderful cat so that's pretty much all that we want inside of here the last thing that we need is a button and so let's actually also get this from uh bootstrap so let's go here let's click on buttons and i want this button let's say this primary button so let's go over to our jumbotron and let's see here start looking so start looking or start not starting looking start looking and now what i'm going to do is i'm going to go back and you can see here that we need some space and there we go so now we have this wonderful home page applications we have our navbar we also have our jumbotron so this isn't very um this isn't very uh you know nextd this is this is pretty much a simple old react uh but now we're actually gonna look at some of the advantages that we get with next so let's actually do that inside of the next section in this section of the application what i want to do is add routing to my application so specifically what i mean is i want to be able to have multiple pages within my next app so if we were to go here to our next app currently what i want to do is i want to be able to click on start looking and what it should do is redirect us from localhost 3000 to localhost 3000 slash cats and this should show us all of the cats components so let's actually go ahead and learn how we can do that now if we were to just go to localhost 3000 slash cats we would get redirected to this 404 page saying that the page is not found which makes sense because we didn't create that page now in order to create that page all we have to do is move into the pages directory so this directory is a magical directory whatever file we put in there is going to be a page in our application now what we want to do is we want to create a cats page so all we have to do is in here say cats dot js and then in here just create a function based component say cats for instance and there we go we're pretty much done and let's just save that and so let me just close this and now if you were to go to cats you can see that we don't get that page anymore that 404 page we can actually see our cats page so that's really all we have to do to create a page in our app we have to create a file that has the same name with as the path that we want so we want slash cat so we call this cats.js now another way of doing it and we're going to do it this way is to create a folder called cats so we're going to create a folder.cats and then in here we're going to create an index.js file and so what this index.js file is going to do is going to look at the parent directory it's going to see that it's cats and then it's going to be like oh okay well this is going to be the cats page so let's actually delete that cats.js file and then in here we can do rfc and we can also say cats or cat and now if we were to refresh you can see that we have our app again you can see cat all right so this is the way that we're going to do it and the reason why we're going to do it is it allows us to nest routes and i'll talk about that a little bit later so in here what we want to do is we want to have our cats components of course our cat card components display them and we also want um we also want to show the navbar so the first thing is let's go ahead and import the navbor so we're going to go here we're going to say nav that should auto import the nav bar let's just close it off and we should see our nav bar and navbar isn't defined student nav auto import there we go so now we have our wonderful nav bar okay cool now you can see that the nav bar here stretches the whole thing whereas inside here it's not stretching the whole thing um so that just might be because of some styling that we have in here in the home.js so let's just get rid of all these styling we'll style our application later and there we go perfect so now what we can do is let's go to slash cats so over here and now what we want to do is we want to create the cats component so let's actually just go ahead and do that and what i mean by the cats component is the cat card component so let's go over to our components directory and then in here we're going to create cats or not casts let's call it card and then card dot js and in here we're going to do efc to get our functional base component and now we're going to code out our app now we're going to actually add our own styles to this instead of relying on bootstrap so what we're going to do is we're going to create a card dot module dot css so this is some magic that happens with next so we're gonna do card.module.css and then in here we're going to add our styles now i'm not going to add these styles manually that would take forever so i'm going to do is i'm going to link my github page we're going to go here and i'll link this exactly in the in the description below we're going to go to the cards we're going to go to the card dot module we're just going to steal all of these styles and actually some of the styles here we don't even need for example we don't need this i took this out and you don't need that and so in here we have our styles so now what we can actually do is import these styles from card dot module dot css so we're going to import these styles from over here now typically in a react application if you want to get the styles in the app you would just do something like this now in that you you could also do something like this in next but next it's actually recommended to import these styles and then in here what we're going to do is actually apply the class names manually so we're going to say class name is equal to curly braces then we're going to say styles and then we're going to do square brackets we're going to do quotes and then the name of the style in this case the name of the style is card so we actually don't have to do square bracket quotes for this so we can just do styles dot card and this is going to create the cards style uh okay awesome so that's the very first thing now in here let's also create another div for the image so let's create a div we're going to give this a class name and this is going to have a class of header a card header so we're gonna go here and this time we're gonna have to do the square brackets because we can't do something like card and then uh this header so slash header we can't do that so what we're gonna need to do is wrap that in square brackets and then in quotes and then do that so that would work and again the the styles are going to apply here and so now what we need inside here is the image so we're going to say the image we're going to give that a style of let's give it a class name let's copy this okay let's give it a class name of card image corresponding to this over here and then what we're going to do is we're going to create another div we're also going to give it another class name and this is going to be card content so this is going to correspond to actually we're not going to give that card content that's fine i guess it doesn't this one doesn't need any uh styles and then in here what we're going to do is we're just going to add an h3 that has the name of the animal and then we're going to have a p tag that has the phone number of the animal and then another p tag that has the email now how do we get all this information like the image all these other things we're just gonna get them from the props so what we're gonna do is we're gonna get the name of the animal from the props we're also going to get the phone number to contact the person if you want the animal and the animal of course is the cat and then we're also going to get the image and then we're also going to get the id might as well so in here what we can very simply say is name and then here we can say phone and then in here we can say email and then here what we can do is we can say image dot url because what this is what we're going to make this do is give us an object that has the url as well as the alt so over here what we can say is image dot alt alt alright so that's pretty much our component and we actually learned how we can style things a little bit differently with next so now that we have that what i want to do is actually render this component inside of our cats page so let's go to our cats page right over here where is our cats page so if we go to pages we go to cats index.js in here i want to render that cats page so in order to render all of those uh cats cards what we need of course is the data so where are we going to get this data from now we could just statically add that inside of our front end but let's actually utilize some of the api features that next provides and so what we're going to do is we're going to actually create an end point that is going to serve us those cat data let's do that in the next section in this section what we're going to do is learn about some of the server side capabilities with next js specifically we're going to look at how we can actually create endpoints that serve us data so in order to do this all we need to do is go to the pages directory and then in here you can see that there is already an apis directory and in here we have a hello.js file and then in here we have this function that is serving some data so actually what's happening here is it's going to create an endpoint that is going to be localhost or whatever our domain is and then slash api and then slash hello and then what's happening is it's going to serve this json data to us so then we can actually call this from other pages as well as other components so we can just make a call to slash api hello and we should be able to get this data and to prove it to you let's actually copy this and let's go here and let's just paste that in and if i were to increase it you can see that we are able to serve the data so in here what i actually want to do is i want to rename this to cats to get all the cats data and what i want to do is i want to return an array of cats so instead of having it all over here what i'm going to do is i'm going to create a new file called and we're going to create it in the root not in the pages in the root let's go here we're going to call it data.js and again for this we're going to go to my github page and i'll have a link for this in the description below and we're going to go to that data.js file right here and we're just going to copy all of this cat data so just a bunch of objects that contain information about cats we're going to go ahead and paste that in there and then in here now of course we could actually do this with a database and you could connect to a database here if you want to however that's just going to be uh taking the focus away from next so let's actually just not do that so in here what we're going to do is just going to serve that cat's information we're going to auto import that in and so now if i were to go to slash api slash cats you can see you get a bunch of cat information all right so now what i wanna do is i wanna actually create another endpoint so another end point where we can actually fetch for one specific cat how do we do that well what we want to do is let me just copy this so if i want to fetch for one specific cat we have to figure out well what cat do you want to fetch for now what's the best way to uniquely identify a specific record in our database which is just a static file well the best way is to pass in the id so what i actually want to do is i want to create an endpoint like this so i want to create an endpoint where we have localhost uh 3000 slash api slash cats and then slash the id of the cat that we want and then what this should do is just give us this object over here it shouldn't give us an array of all the cats it should just give us one object now how do we pull this off well really easy so in order to do this what we need to do is inside of the api we need to create a cats directory and then in here instead of using a cats.js we're going to use an index.js and remember this is going to be exactly the same if we have an index.js what that's going to do is look at the directory above it and that's exactly what it's going to be called so in here let's just copy this or just copy all this and let's paste that in here and i'm going to delete the cats directory and i'll show you exactly why we need to do this so let's just save this refresh and save here refresh oh yeah and then let's get rid of this and then okay and of course have to fix our imports because now we're here there we go so we still get our data awesome so now again what do i want to do i want to do something like slash cat slash whatever that i cat id is so how do i have nested routes inside of our app because this right here is the nested route we're doing slash cats slash id well in order to do this what we do is we go inside of this cats directory and we create any other file that is not going to be an index.js file so for example we can create a i don't know pumpkin pumpkin.js file and then in here what we can do is let's let's just paste that in here and we're just going to return hello pumpkin hello pumpkin really weird and so what's happening here well this pumpkins.js file is inside of the cat's directory and so what's gonna happen here is our path is gonna be slash cats slash pumpkin so slash cat slash pumpkin and that's exactly why we had to create this cat's directory if we wanted these nested routes so now if i were to do over here slash cat slash pumpkin and i misspelled pumpkin let's just copy this and paste it in here pumpkin you can see that we get hello pumpkin all right cool so that's exactly how we can have that slash cat slash whatever now of course what we want to do is we want to make this dynamic because this is going to be the id of the cat now in order to do this what we're going to do is we're going to change the name of this we're going to change the name to well what is this going to be it's going to be an id because it's going to be slash cat slash id and to specify that it's going to be dynamic we wrap it with square brackets so we wrap it with square brackets right over here so let's paste that in and now if we were to save this and save that now if we go to slash pumpkins this still works and if you go to slash one it still works and if you go to slash whatever it still works so you can see here that it's slash cats slash whatever it's just a dynamic id and so here what we can actually do is have access to that id that we pass in so in order to have access to that id what we're going to do is utilize the request so in inside of just a typical rest api we have the request we have the response so now what we can very simply do is get that id from the dot query so we can say here id is equal to request dot query and then in here let's actually take this id and let's pass it in here dynamically so now if i did slash cat slash five you can see here that we have five let me zoom in here once more five if i did slash cat slash whatever we have this so you can see that this actually is working perfectly fine so now what we can do is we can utilize this id to fetch the cat that we want so we can say here const cat is equal to cats dot find and what is going on here you can say cat and we can say cat.id because each cat has an id is equal to the number version of cat of the id because this is going to be returned back to us as a string as you can see here and now what we can do is once we get this cat we could just return this cat so now if we refresh here we should get null because we don't have that cat but if we would were to do something like 2 we get hector so now we created a dynamic route awesome and this is actually going to be really important because we're going to do the exact same things but not with route handlers but with pages but the premise of it is going to be exactly the same now that we created the routes to serve us our data what we're going to do is we're going to go to those pages and actually fetch the data so in order to do this let's go to our uh cats directory we're gonna go to the index and in here what we want to do is we want to fetch the data so we need to make some sort of asynchronous request some sort of http request to that endpoint that we created in order to get that cat's array so in here what we're going to do is create a function so let's go here we're going to create a function and this function is going to be called fetch cats and of course this is going to be asynchronous so let's mark it with async and then in here what we're going to do is const response is going to be equal to a weight we're going to use the built in fetch method so we're going to fetch and then we're gonna say slash api slash and then cats and what's nice about this is that we don't have to define you know whatever endpoint it is or what the url is because the url is gonna be exactly the same as the one that we have which is localhost 3000. so we're going to do slash api slash cats and then what this should do is give us a response now in order to get the data from the response what we're going to do is const data and we're going to await this we're going to say response dot json so we're going to get our data back by converting the response to json and then what i want to do is i want to set this data inside of our state so what i can do here is i can create a um a cat's state so we're going to say cats set cats we're going to say that that's equal to use state notice that i auto imported it here and then this initially is going to be an empty array now over here the data is going to be an array of cats so what we can do is we can just do very simply set cats and then we can say data really easy so what i want to do is i want to call this function as soon as the page renders so the best thing for this is a use effect so let's go here use effect again notice that it's going to auto import as you can see here and then we're going to go here we're going to add the square brackets so we can uh fetch this just once and then what we're going to do is we're just going to very simply call fetch cats and so once we fetch our cats what we should be able to do let's just quickly console.log the data let's console.log this data so we can see exactly what we have so let's go to this inspect go to the console we're going to go to slash cats so not slash api slash cast we're actually going to go to the page itself and now if i were to zoom into the console you can see that we get uh six uh objects inside of an array all of our cats so that actually works successfully so now what we want to do is we want to iterate over our cats array and render a cat's card for each one so let's go over here so let's go down here and what we're going to do is we're going to iterate over every single cat so we're going to do cats.map we're going to say cat and then for this we're going to render a component so let's go here and we're going to say we want to render which component well we want to render the card component so we created this here the card component okay so let's go ahead and import that in so let's go here again notice i auto imported it and we're going to just close this off let me quickly close my door my cat is making a ruckus there we go sorry about that my cats i don't know what my cat is doing okay so now what we're gonna do is we're gonna pass in the props so remember the card component and let's close this close that close this close this close this we got too much things going on here let's close everything here so remember the card component it takes the props name phone email image and id and so what we're going to say here is name is equal to cat.name we're going to say id is equal to cact.id we're going to say phone is equal to cat dot phone now we could also pass the cold cat thing itself but the cat also has things like description that i kind of don't want to pass in so we can just do it manually like this then we can do the email which is the cacta email or not cat yeah cut that email and then we can say image and then over here we can say that the uh yeah we could just pass in the cat dot image so over here that's the image and then the last thing that i want to pass in actually no that's pretty much it so now if we actually were to save this and we were to go back here you can see we got some cats let me just zoom out a little bit we get some cats how awesome is that now of course it's not styled properly so let's actually quickly fix that right now so the first thing i'm going to do is i'm going to just give this a i'm going to move this nav board over here so i'm going to add these fragments so i'm going to add this fragment we're going to move this snap bar here and then what we're gonna do is we are going to um we are going to uh inside of this div save that inside of this there we're going to add a class name of container and this is going to be a bootstrap class that's going to put everything kind of in the center over here we're also going to give it a margin top empty of 5 just so we can have a little bit of spacing between here now what we also need to do is we need to uh style this over here to give it display flex so what we can actually do in order to do this is go to our home dot module dot css is that what is being used no it's not that's not what's being used actually what we can very simply do here is just create a div do this and we're just to add some inline styles for this just to make it real quick so we're going to say display flex and then we're going to say flex wrap we're going to say wrap and i think that should do it so now we have these guys so and let's also give it a justify content say justify content of space between see if that makes a little bit better okay it's not that nice actually let's get rid of that justify content and then inside of each card let's go to our styles here and then inside of each card let's give it a margin right of something so we're gonna say margin right of let's say one ram all right this is looking good maybe we can't even make it three rams there we go okay this looks good to me all right awesome so that is our cards and now we're able to fetch our data how terrific is that so now what i want to do is i want to have the ability to click on a card and once that clicks on the card it should redirect us to slash cat slash whatever card id is and it should hit that um cat end point that's going to give us that one cat and then show us the description of the cat as well so let's do that in the next section in this section of the course what we're going to learn is how we can redirect to different pages inside of our app so right now what we have is this of course and when we click on it we don't get redirected anywhere similarly with the nav itself when we click on it we don't get redirected anywhere we actually have to manually change the route to get to whatever we need so you can see here if we click this nothing works so let's actually learn exactly how we can actually make these things functional and redirect to different pages in outside of our application so one thing that we can do is we can go over here and let's actually start with the nav and what i want to do is once we click on this nav bar right over here which is a span what i want to do is i want to redirect this to the home page now in order to do this we could make this an href but next actually provides us with a great link element that we can utilize so if we went here and we did import and we imported link from next slash link what we can do is we can actually utilize this link element or this link component to redirect our application redirect ourselves between pages so in here what we can do is we can have link and then here we can have link and then in here we can add an href and then this can be just the slash path and so now you can see the styling is a little wonky we could you can fix that later i'm not going to but now if you were to go to something like slash cats and i were to click here again you can see i get redirected awesome so that that's how we can that's one way of doing it another way of doing it is let's actually go to our jumbotron so inside of our jumbotron what we're going to do is we want to of course go to the slash cats page now let's say we want to actually keep this a button we don't want to make this a link so how are we able to redirect but by keeping this a button because under the hood what this is going to be is an anchor tag and so another way we can actually do it is getting something called use router so we can get this use router hook and we can get that from next slash router and now in here what we can do is we can say const router is equal to use router and we can go ahead and invoke it now we can actually use this router and inside of an on click handler so inside of an on click handler what we can do is we can execute a function that calls router dot push and we invoke it and then we push the path that we want to add inside of our application or we want to actually go to so we want to go to slash cats so again we have an on click we have a router dot push slash cats if i were to click on this now you can see we go over here and now let's actually do the exact same thing but for uh these cards so over here let's copy this on click let's go to the card component and then in here let's have an on click handler and this is gonna go to slash card slash whatever card id so over here let's add template literals and then we're going to say slash dollar sign and then the id that we pass in so now and of course what we need to do is import user router so let's go over here let's say const router is equal to use router and we're going to invoke this notice i auto imported it and now if i were to click on this cat you can see we get redirected here now of course here we actually don't have any page so how are we going to add this page well we're going to add the pages the exact same way that we added the api route so inside of this cats directory we're gonna have a id dot js and the id of course is gonna be wrapped with square brackets and then in here we're gonna have a functional based component and we can call this cat here all right and now in here what we want to do of course is to create our application well we want to um render our cat information for that specific cat so in order to do this the first thing that i want to do is i want to make that http request to get that cat info so let's go here or let's create a function and we're going to create a function called fetch cat and this is going to be async so we're going to have this async function called fetch cat now this is this is going to hit the path slash api slash cat slash whatever id this is so inside of the page we need a way to get this dynamic id this one right over here now how do we do that well we do that with use router so over here we're going to say router and we're going to say is equal to use router and now to get the id what we can do is destructure out the id from the router so we can destructure out the id from the router and then dot query so similar to what we had up there from the router.query we can actually destructure out that id and remember the id is going to be exactly the name that we have right over here and so now what we can very simply do is utilize this id to make our fetch so we're going to say const response is equal to a weight and let me close this over here we're going to say constant response is equal to a weight fetch and then we're going to do slash api slash cats and then slash uh dollar sign uh curly braces id and we're gonna do the exact same thing we're gonna say const data is equal to weight response.json and then lastly what i want to do is i want to create a state so let's go over here let's say const we're going to say const cat and then set cat is equal to use state notice that i auto imported it initially we're going to give it a value of null and then here what we're going to do is set cat data all right so let's go ahead and now let's create a use effect so inside of this use effect i auto imported it okay awesome i didn't think i did so inside of this use effect what i want to do is i want to call fetchcat so let's go here let's fetch our cat and this should fetch our cat based on the id that we have in our awesome so once we have our cat what we can very simply do is render that cat information inside of here so what we can say here is something like um if the cat data is not null so if the cat data doesn't also if you actually have cat data so we can do that by saying cat and and then we can actually render the element so if we have the cat data and it's not null we want to render the elements so we're going to say div here and this div let's give it a class name of container and mt5 and let's also give it a i wonder if you can just say flex here instead of giving inline styles flex here now we're also going to give it an image and then the image is going to have a source of cat dot image dot url and then here we're going to say cat dot image dot alt all right and then that's the image and then let's just display some of the information so we're gonna say div we're gonna say class name we're gonna give this a margin left and right so margin x of five and then we're going to say h1 over here we're going to display the cat.name and then over here we're going to display in a paragraph the cat dot description all right so now if you were to save this and now if you were to go here you can see that we get this and this this display flex actually didn't work so let's just make it inline style i'm not sure what the bootstrap styles is for this so you can say display flex all right awesome so if we were to re if we were to go let's go back to cats and if we were to click on say hector you can see that we get hector and also let's add the nav bar right here now you can notice that the nav bar we're adding it like multiple times in our application uh so let's go here nav bar so we can actually fix that so let's say what is it called is it called nav or navbar nav so over here we can have our navbar we can actually navigate throughout our app so this is pretty much our application we learned quite a bit we learned about the server side of next we learned about how we can navigate through different pages but there is one little thing that i want to talk about so right now what we're doing is we're rendering the nav bar inside of every single component every single page that we have created is there a better way to do this for example actually what if we had a nav bar and we also had a footer and we also had something else that we displayed on every single page now we're going to have to hard code every single thing inside of our page every single time we're gonna have to duplicate it and anytime we want to make a change we have to move from one area to the next that's not great so we're gonna actually fix this with layouts in this section we're gonna learn about layouts and what layouts do is solve the problem where we have multiple components within multiple pages inside of our application so instead of what we're doing here just simply hard coding it what we can do is we can create a layout and give a particular page that layout now with one component it seems like a lot of extra work but if you have multiple components that are shared across multiple pages layouts are really really helpful so in order to create a layout what we can very simply do is let's just close all these off in here let's create a layouts directory and then in here what i want to do is i want to create a default layout so i'm going to create a default.js file and this is going to be a very simple component just a very simple function based component and i'm going to call this default layout so in here what we're going to do is we're going to pass in the children and the children are going to be the children components that we're going to pass in and then very simply right over here what we can do is render the nav element which is the element that we want on every single page and then we can have a main tag i mean this can be whatever it is that we want and then in here we can have our children and so what's going to happen here is we're going to have our nav there we're going to have all of the other components that are inside of the page itself and then we can also if you want we can add a footer here and then we can add whatever it is that we want but what's nice about this if we use this layout if we go to whatever page for example this one we don't actually have to render the nav components so let's actually just go ahead and do this so let's save this and now what we're going to do is we're going to go to any specific page that has that we want to have this layout in our case every single page we want to have this layout so we're gonna go here page we're gonna go to cats and let's go actually let's go over here to the index first so this one right over here we're gonna get rid of this nav so we're gonna get rid of this nav right over here and once we get rid of this nav we're also gonna import the default layout so we're gonna say default layout should auto import i guess it didn't let's go over here let's auto import it so import default layout from over here so i guess it did auto import awesome and now what we're going to do is very simply just wrap our component with the default layout so let's just get rid of this main tag and then in here we're going to have our default layout we're going to have our default layout and you can see here that um let's close this off right here you can see here that we have our default layout and then over here we have this head component and i'll talk about this a little bit later don't worry but now we have this let's close this off as well here and save that and now if you were to go to our home page you can see that we have this awesome so we still have our nav so we're going to do the exact same thing for all the other components so let's go over to here and let's get the default layout so we're going to import default layout from default layouts and we are just going to wrap this part of the app so we're going to say here default layout we're going to wrap this part of the app with the default layout let's go here awesome and so now in the cats we also have our nav and then lastly inside of the id uh which is the dynamic page let's add the default layout here let's see if we can auto import it this time default layout we can awesome uh let's close this off and so right in here what we can very simply do is add this default layout cool awesome and now if you go to a particular cat we should also have our nav the last part of the application i want to talk about that head component that we saw right over here so inside of our index.js file we have this head component and this is actually really great for adding the metadata for our application so over here for each particular page what we can do is we can supply it with the title of the page some metadata as well as some links so we can actually have a different fab icon for different pages you can also have a different title for different pages and we can also have different you know metadata descriptions so if i were to go to the root page if you can see here i'm not going to be able to zoom in but you can see that the title of this is create next app now for this page i can call this i don't know cats world or something maybe that's what our app is called now you can see here that now is called cats world we can also have a different fav icon so we can have a different inside of our public directory as you can see here we have this fav icon we can redirect it to different fab icons if we want to but i'm not going to do that and of course we can have different descriptions so what we can actually do is for each particular um page that we have here so for example the cats page what we can say here is also add a head element and we have to auto import that in and we get that from uh next slash head and over here what we can say is our cats if we want to and of course we can actually change the description and the content itself so now if we were to go here this changes to our cats how cool is that now this can also be dynamic so if we were to click on this we can actually render a dynamic uh head element so let's go here let's copy that in and let's go to this page and let's paste this in let's auto import this from next slash head let's get rid of this nav and then in here what we can do where is the component in here what we can do is we can just very simply call this we can very simply call this cat dot name so we can get the cat name and if we were to render this and the reason why this is failing is because uh we're still loading so we can actually just put this in here so let's put this right in here so let's add some fragments so let's add some fragments let's paste that in there and now if i were to go to sydney you can see here that we have sydney how awesome is that and of course again we can change the metadata as well as the links so that pretty much wraps up the next js course i hope you guys learned a lot and i'll see you guys in the next one

Channel: Laith Harb

Views: 3,484

Keywords:

Id: 6HTs8HtZMt0

Length: 61min 19sec (3679 seconds)

Published: Sun Dec 12 2021