NextJS Course For Beginners - Routes, Fetching, SSR, SSG...

hey guys how's it going i'm back here with another video and today i decided to bring this video which i've been wanting to make it for you guys for a very long time where i'm going to be going over next gs for beginners so this will be a one hour and something long video where i'm going to be going over all of the basic stuff that i think um react developers who want to learn next js should actually learn as many of you might know next genes is actually a different version of react and for that reason i would recommend learning at least the basics of react first before trying to learn next js so by the basics i basically mean learning states learning how components work learning about props all of the basic syntax and how to actually just create a simple react application and that should be enough for this video if you want to check out the code for everything we're going to be working through um it's going to be in the description together with the timestamps as if you want to learn something specific in this video just move towards the timestamp where i talk about that topic so with that in mind let's just go over a little bit about what exactly is next gs like i mentioned nextgs is an open source framework that is built on top of node.js and it bases itself around react so basically the code for nextgens is extremely similar to react you only have to learn a few extra things in order to fully understand next however the impact of learning next and using it instead of react is way bigger than the actual learning curve for someone who've learned to react in the past so the main difference between next gs and react normal react.js is the fact that next.js provides server-side rendering compared to react which only provides client-side rendering so i'm going to explain what that is right now client-side um is when you have a react application which is not built with next.js it's just pure react and when you deploy that application what will happen is whenever a user goes into your website it will first be an empty html page like the one you're seeing right now this will be for a brief second what the page will represent just an empty page with a single div with an id called root then immediately react will fetch the javascript for for all of the react code that you wrote compile it and basically download it into your page and that will be your application so what does that mean it means that before a user enters into your website your page your html will be basically empty because what react does is just downloads the the the javascript and uses javascript to put the html inside of the page so that is bad because of a few reasons first of all um if there's any bots for google facebook any bots that look through pages to try to provide um to serve for search engines they won't find the keywords that exist inside of your website so if your website is about football for example it doesn't matter how many times you write the word football inside of your react code initially there won't be a single instance of you writing football inside of your html so those bots won't be able to recognize that that's a keyword for your website thus it will be very bad for your seo another thing is that server side rendering is actually faster than client-side rendering meaning that a next.js application usually have better performance than a normal react application the reason for that is because um downloading your your your content from the server is faster than downloading it normally um like react does so it means that it will enable um a faster page load which uh again just improves performance and makes your website runs faster a final benefit that i i put over here is i'm talking about being the future of react so there are a lot of people who already use nextgs meaning that it might not even be a future it's just something that already happens however we can't disagree with the fact that react is still way more popular normal react is way more popular however i don't know if that will be the case in the future there are a lot of benefits of using nexgs it mixes the benefits of having server-side rendering with the with the benefits of having some sort of frameworks is so easy like react um and puts both of them together meaning that there's basically no really good reason to just use react right however we don't know what the future will hold i would still learn next chess just because it is indeed better to use instead of applications and that's why i wanted to make this video now before we get into the video if you could leave a like and subscribe i would massively appreciate it it would help push my videos to more people and it will i would just be really grateful if you guys could do that so with that in mind let's get into the tutorial [Music] [Applause] [Music] okay everyone so now let's get into the tutorial in this first part over here i'm going to show you guys how to set up next.js into a project and also a little bit about the folder structure and how a next project actually looks like so in order to install nexus into your your project into your computer you need to open your code editor which in my case i'm using vs code and you need to open inside of a folder now i created a folder called next tutorial and i just opened inside of vs code so similar to normal react applications you run a command which in this case is the create re create next app command like this so we have the create react tab command which creates a react application and for next it is like this now it depends on if you're using npm or yarn or any other package manager library in my case i'm using yarn but if you're using npm you write npx create next app like this and then a dot at the end and if you're using yarn you just run yarn create next app which is my case then you put a dot and you press enter and it will start installing everything related to next gs so as you can see over here it just finished installing all of the the stuff related to next and i want to go over a little bit about um over what exactly this stuff are i'm just going to zoom in so you guys can have a better view um so we have a bunch of files over here this is simply this is a beginner course i'm not going to talk about a bunch of them because similar to the approach that i use when i teach react i know that a lot of the files are not necessary to fully understand in the beginning because they might scary beginners in this case it is the same so justin bro a brief overview of each of them is fine we have the yarn.log file which is the yarn file we have a readme in case you want to publish this on github or any other place where you might want to have a readme we have our package.json which is really important because it it gives us all the scripts that we need to use to actually run our application it is a little bit different from how we run our react app so i'll talk about that in a bit then we have the next.config.js and here you can configure a bunch of stuff um for example as you can see over here you can set strict mode to true in react um and many other stuff it's not important in the beginning but just to know that this is where you configure stuff related to next gs then we have our git ignore which is common standard nav application we have our eslint file so this already has eslint integrated into it and then we get into the folders we have our styles folder over here and it is common practice for next.js to have css modules as it's the main way to attribute styles to your elements so what do i mean by that well the first file we have is just a global css file it is used to determine um different global features that you're going to be having in your application for example in its initial value it sets a couple padding margin the font family a little bit of color all that kind of stuff right and if you want to add css for many different parts of your project i would do it right over here then we have an example of a css file for a specific page in your application it has the dot module uh feature over here because uh when you you can actually call certain classes and ids directly from um your application right you'll see this later but just know that this serves as a normal css file the only difference is that it's a module meaning we can call the classes inside of our code so then whenever you want to add styles just add them right inside of this folder then we have the public folder which um right now it just has an icon and an svg um similar it's very similar to the react public folder the main difference is we don't have that html file that reacts uses to to render the application because like i mentioned everything will be rendered in the server side so we don't need that inside of here then what we have is some of the most important folders we have the po the pages folder which is where most of our application will exist the main file over here is the app.gs this file basically is the main component of replication it is the entry point of application and for that reason we import the global css over here because it is the first component that exists inside of your application you can see the code is very similar to how react works right it is a component now basically what it says here is it it accepts as props a component and whatever props you pass to that component and then it renders it now why do we need this because next gs has a built-in system for routes or pages in your application that allow that basically makes your whole application run around this so you don't need to install react router dom you need to install configure anything related to routes it is already built in to next js so what this is doing right here it's saying that every single file you create inside of this pages folder it will basically render a new component a new page inside of your project and display that component now if that's confusing for now don't worry we will go over how to create routes but this is the point of this file then we have an example file or an example page which is the home page over here which always comes with um with every application with every next js application you can see it is very similar to normal react like i mentioned uh what i was talking about the css modules is this over here instead of just putting a class name of container inside of a string you actually access the styles from the module.css file and then you say styles dot the name of the class name you want to attribute the styles it's just a different method of using styles which is common practice in next.js you might see that um like there's a couple stuff that is not common in react and you you see it over here the main things are the next the main things are the head component and the image component so there are some built-in components from next that you can use in your application one example is the hack component and the other example is the image component you can research more about all the different components that they have by looking at their documentation i will go over some of the most important ones in this video so keep tuned for that so the last folder we really want to focus on is the api folder over here so since next gs does server signed rendering it also allows us to create our own api inside of our project so that means that the front end and the back end will exist inside of one project differently from normal react where i usually create a folder called client a folder called server and separate the backend and the front end over here the api will exist inside of your pages folder and an example they give over here is a simple endpoint that just returns a status code of 200 and some sort of json right so all of this like i mentioned is is something just to keep in mind now this is basically it for all of the folders and files that we have inside of a next application if we if we want to run this application and see um the actual stuff inside of a browser we just open up our terminal over here we can clear it and run yarn dev if you're using npm run npm dev um like i mentioned it is different from normal react applications where you run yarn start here you run yarn dev or npm dev so if you want to check it out we just open our google chrome or any other browser and go to the localhost 3000 and as you can see um the website is displayed as it should which means it is working perfectly now that we have our project running we're going to get a little bit into um how routes work inside of nextgs okay so like i mentioned um routes are very easy in nexus compared to normal react and the reason for that is because we don't have to set up anything we don't have to install anything it is integrated into next on its own so to start off everything i'm just going to delete everything inside of our index.js file over here this is all of that stuff that comes with the create next app command so now if you go to our google chrome you'll see our home url is completely empty now this is a home page and it is exporting um just a div we can actually put some text inside of here for example i can add an h1 tag and say hello world and we'll see that this change appears inside of our project now if we want to create a new route and a new page in our application all we have to do is we just have to add a new file inside of our pages folder so for example if i want to create a route which is um uh i don't know an about page i can then put about dot gs and keep in mind that you should put it with lowercase letters then inside of here if i just say create a component for example i say const about is equal to this function and then i just return a text saying something like this is the about page then at the bottom i just export this component like it is a normal react component because that's how you should treat it then if we come to our browser all we have to do to access this component is just put in slash and the name of the file so this is the about component the name of the file is about.js meaning that it will exist in a route called slash about and as you can see it works perfectly we don't have to set up any of those annoying stuff that um react product dom makes us do um it is completely integrated to the core of next gs so we can create as many files as we want and as many routes as we want and it will work perfectly now now you might be wondering okay this seems cool and all but there was a lot more customization to our routes that we could include when we set it up on our own an example of that would be having some sort of parameter over here such as a username or an id that will be used inside of our component the thing is with nexjs you can do all of those things as well so i'm going to show you guys how to do that inside of our application so in order to make pages that are dynamic meaning that they change according to the the params of the url um all we have to do is instead of creating a file for a specific page like we did for the about page we create a folder and in this case let's create a route called um something like profile so it'll be like a profile page right but each user will have their own profile so the page for the profile should change depending on which user we're trying to look at the profile of right that makes sense so what we do whenever we do something like this is the file we create inside of the folder is always in index.js so this file will represent whenever we go into a url which is slash profile so if we don't put anything after if we just say slash profile then this would be the page described by this component over here so let's just create one and let's call this profile default something like this and since this is a component let's just export default at the bottom export default and over here let's just return something like a div saying profile page right now we need to export the profile default over here and now it's fine so when we go to this page you should see um this thing that we just wrote the profile page however what we want is to have a route which then we can put something like pedro tech and it it recognizes that this is the pedro tech profile page and just displays the username or something like that right so to do that all you have to do is you have to create a new file instead of here with open square brackets like this you say ges and inside of the brackets you basically put the name of the variable you want to put in the params so for example over here if we wanted to do something like this this would be a username so what we can come over here and just say that this page will be called username brackets.gs now inside of this component all we have to do is we'll just create the component itself so i'll say const profile is equal to this function then say export default profile now you recognize that um when we're doing something like this the we call the component inside of the the params file profile instead of this one over here this like i mentioned is just the component that runs whatever happens on a default file um for the for the profile route but in our case we don't need that so in the profile component is actually this one over here so inside of here what we want to do is we want to return a div and this div will include a message saying hello and then the name of the user and an exclamation point so how do we get access to this value over here well in next gs it's pretty simple there's actually a hook that comes with next.js which facilitates this a lot so i'll just say import from next and then we're trying to access the router part of nextgs so i'll just say slash router and we can import a lot of different things from here but i'm going to import the use router hook and to use this hook all we do is we say const router and we set it equal to use router now we have access to a bunch of information about the routes of our application including um we can just structure whatever variables we put at the top over there of our url by saying router dot query and since we name this file username it means that the param um over here is about it's considered a username variable so we'll just say username like this and i'll copy this and i'll just paste it over here so what should happen is whenever we go to the page to the url where it is profile slash um pedro attack it should display um hello page or tag as you can see so we can get the values from this thing i can put over here george and it will say hello george right this is very commonly done with ids as well instead of just a username you can actually just create another instead of calling this username you call this id and you do the exact same thing so this is how you have dynamic routes in next ges okay everyone so now what we're going to go over is some of the built-in components that basically create a next.js application that don't exist in react so there's three that i really want to talk about the first one is kind of related to routes which is the link component now in react order dom you might know that if you want to create a link inside of your application for example in the home page if i wanted to create a link i would use a component like this which is a link component the it is basically the same thing as you can see over here it is the same name but instead of importing it from the react order domain library which doesn't exist in next we import it from the next library at the link service so this component is pretty simple we just put over here a link for example if this is a link to the um to the about page i can just say about over here and then we need to put a prop referring to where we want to link um this page to now in instead of using the two property which is what we use in react product dom we actually add the href property which basically is just the link or the route to the page we want to go in our case we want to go to the about page so i'll just put about meaning that now if i come to our route over here and i go back to the home page we'll see this link over here right at the top the about link and we can click on it and it will bring us to the about page so this is really quickly what the link component is now let's talk about another component which we have already seen in the beginning and is extremely important as well now if you recall there's no html page in the public folder well that means that there's no way for us to add though like stuff related to the head of the of the page right so in html you know there is the the head the body the footer like there it is divided into different um structures right now when we're using normal react we can navigate throughout that by using the index.html page that exists in the public folder but in next we don't have that it's actually way simpler to add stuff related to the head of the application what you actually do is you just come over here at the top and you just import the head component from next slash head now this head component basically what it means is whenever you put this inside of a project like i i were to put it over here something like this whatever you put inside of this it will accept stuff like meta tags title tags anything related to the head so in our case let's do a really quick example you see that our page right now it basically the title is localhost 3000 let's go to the homepage because this is the home page but it basically says localhost 3000 and the title of a page is this little thing over here if we want to change that to um something like title and then we put something like a pedro tech next tutorial and we save this now you'll see that this is exactly what appears on the head of our on the title of our page which is amazing and we can add like i mentioned a lot of stuff like meta tags um stuff that naturally exist inside of the head in an html document so i found that really interesting when i was learning next because it is something you don't um do it that easily in react now the next thing i really want to talk about is the css modules over here like i mentioned a little bit about it in the beginning but i haven't shown you guys truly how it works and and that's what i'm going to explain right now so basically we have this very boring page over here right it's all just white and black we want to add some color to it normally in react you can either add like um in style styling by doing something like this saying style and then putting something like a color equal to red and it works right obviously it works but the common standard practice for next gs is using the the css modules file so we are in the home page right now right and in the home page for this home page if you want to style it we create a home.module.css file inside of our styles folder it already exists because this came together with um the initial project in our application like when we when we ran create next app it generated this but we're going to delete this because we're going to add some styling of our own right you see over here we have our page so if i want to change the color of this to red for example i would have to give a class name to this h1 tag over here now how exactly do we do this well we actually create the home.module.css file then we import this file like this by putting the path and then calling it styles and then whatever class name we put over here for example let me call this home page title right i created this class then what i have to do is i just have to come over here grab the styles that i imported from this file and then just say something like class name is equal to styles dot the name of the class name that we created now this name has to match this name over here or else it won't work and you can see that now if i come over here and i say color equals to green instead of red you'll see that this is exactly what happens now this is really cool in my opinion it prevents like i don't like having strings inside of my react code i would much rather just have objects like this and um instead of using string just just do it this way so css modules is something that i actually prefer rather than just using normal normal styling so if you're confu if you were confused before for why we're doing styling like this now you know this is how we actually do it so in order to practice all of the concepts that we've learned so far what i'm going to do is i'm going to build a very simple navbar um inside of this application and also add a 404 error page that um appears whenever you put a route that doesn't exist so right now if you put this um this appears over here which is pretty fine but if you want to customize this we can definitely work with that and do that um so i'm also going to show you guys this so in order to um start uh creating our navbar what we want to do is we want to create our network component so to create a component that isn't a page what we can do is we can just create a folder outside of the pages folder called um components right something like this then inside of this folder we actually put our components because they're not pages then i'm going to put the navbar component over here which is this page over here and we're going to generate our component on our own i'm going to say const navbar is equal to this and at the bottom we're just going to export default um the network component now our navbar would be pretty simple what we want is we just want a little div right and i'm going to close this so it's more centered but what we want is a div and inside of this div there will be another div which will contain the links now like i mentioned to add a link inside of um next gs all you have to do is you just have to import the link component from next slash link and then we just put all the pages that we're gonna have inside of our application so the links will run like this we'll have the first link which will be to the about page um then let's we can create more pages if we want to um let me create the i don't know profile page right like we we already have so i'm gonna say link and i'm gonna say profile and then let's create one for the home page right which should be the first one i'll say link and i'll click home like this now we have to put the routes for each of them so i'm going to just add an href over here and put a string with an empty slash meaning it's the home page then we're going to do the same thing with all of the other ones but at their respective routes so this is the about route and this is the profile route obviously the profile one like we know it actually requires some sort of um like some sort of uh username or param at the end of it because if we just go to the profile page it will just render the default profile component that we created over here right but if we put something different if we put a username over here like pedro tech it will render the pedrotec username we're going to handle that in a bit but for now let's just worry about the following routes so what we do now is we can add some styling to it similar to normal pages if we want to create a styling for this page we just create a file in the styles and call it something like navbar.module.css and we save it then the the actual styling we're going to implement is pretty simple if you want to move past this and just see the styling it's not much at all i usually don't show me writing css on my videos but if you want to check this out um just continue watching if you want you can just skip this small section but we're just going to add the styling for the navbar so we're going to create a class name called navbar then we're going to create a class name called links and then we to actually add this class names we'll import this file over here by saying import styles from and then we put two dots uh to go back a a directory then go to the styles folder and then go to um navbar.module.css then we do similar to what i explained to you guys you just give a class name to this and say styles.nevbar because because it's the name that we called it over here and for this one we do the same thing we do class name styles.links right because it's exactly what we called over here now for the navbar and for the links the styling is very simple the navbar all we want is the width to be a hundred percent the height to be 80 pixels then i want the background color to be something like um an rgb of um 28 28 28 it's going to be kind of black which is what i want for the network then we're adding a display of flex and we can just come over here and say we want to justify the content to center then for the links we just want to display of flex which is what i usually do then justify the content again to be centered align the the the content to the center so that we can have it vertically centered as well then we do width of a hundred percent and the height of a hundred percent and what we can do is add a color to this by just saying color white like this i want the text to be white we also want to give a little bit of margin because um there will be no margin between the links so they'll be all grouped together so we're just going to say links a margin left is equal to 20 pixels now this is all the styling we have to do um and it should be fine now how exactly are we going to put this navbar into every single one of these pages we want it to be in every one of them right if we wanted to be something default to all components now the way we can do something like this is by implementing what is known in next as a layout and the layout is really interesting what you do is it basically it is a component that wraps around other components and it will render um some sort of ui or some sort of logic for every component inside of that specific layout so let's create a layout right now we'll do that by coming to our components folder and just creating a layout.js file like this now this will be a simple component i'll just say const layout and create our component then at the bottom i'll just export default layout and one thing i want to point out is since we'll be using this component to wrap around other components it means it must take in as props all the components below it right so we have to grab the children components that we'll put inside of this component then um what we're going to do is we want to return and what we can do is we can actually add some sort of style over here sort of ui that will exist inside of every component that we put as a children so what exactly do we want to um replicate right well you want to in every single one of the components to have a nav bar right the one we just created so we can add the nav bar over here and then we can have some sort of div over here um we can add class names to it whatever we want but most importantly what we want to do is we want to render the children which is the components that will exist below it so all we're doing over here is we're just saying that in every page or every component that is wrapped around the layout there will be a navbar at the top and then we're rendering the rest so we'll save this and we'll come to our highest level component which is the app file over here and all we're gonna say is we're just gonna say we're gonna wrap all of this around with the layout right and i'll grab this part of the layout put it over here and i'll just import layout from dot slash um we actually need to go back twice and go to components slash layout now if we check it out it doesn't seem to work um let me check this out um yeah i already found the error uh we accidentally called this network with a capital n so make sure that whenever you're doing something like this you actually set the the letters to be exactly the same this is a common mistake um i'll just delete this over here and you should see that we should see an actual navbar now and it's exactly what we do i'll zoom out a little bit just so it looks a little bit better but now we have a beautiful navbar that works in every single page if i go to the about page it's still here you see the about component is rendered below the navbar because that's how we defined it in our layout right the children is rendered below the navbar so i'll just go again to the profile and you can see everything works smoothly okay so now what we want to do is to see how can we add a 404 page for whenever we go to a route that isn't a route that we defined through one of the components right we got this default page over here which kind of changed now because even the 404 page um we have the the network being applied so um what we want to do is actually customize this page why would we want to customize this page um because you can make it really cool some websites have some really nice 404 page um it just adds to the user experience and it's pretty easy with next gs um similar to this app file over here and the index file over here the name for the 404 file is very important because the way next recognize you're trying to create a 404 meaning a page not found page inside of your application is if you name the file 404.js by the way all of this works with other extensions as well so next is not um just js it includes typescript as well so keep that in mind and over here we want to create some sort of component let's call it page not found and then set it equal like this and then we'll just export default page not found now this component we can do it we can do whatever we want with it but i basically like to keep it simple with um my my 404 pages i like to just put something like a an h1 tag saying page not found um say then i'll put like i don't know an h3 type saying um check to see if you are in the correct page something like this and and then finally i like to put some sort of link towards the home page or another page in our application that makes sense so what i'm going to do is i'm going to add one of the links from next and we're going to put it to the home page click here to go home then we're going to put the href and the a12 will be as you guys might imagine just an empty slash which means we're going home and you'll see that if we actually refresh the page meaning we're going to a route that doesn't exist it should now show this right and um like i mentioned if you want to make this look cool you can add the css for it but the important part is that we can actually customize that page and every time we try to go to a page that doesn't exist um this is what we're going to see and if i click on this we'll go home so this is kind of what we wanted to do now that we have a lot of the basics out of the way i want to start teaching you guys some of the more important stuff for next.js so what exactly do i want to teach you guys well i want to talk about data fetching and next um i'm going to create a very simple um project over here where we're going to be fetching data from a public api um an api about cryptocurrency obviously you could be using any api in this example actually i would recommend you trying out a different api so you can actually test it out on yourself and play around with the code but basically we're going to do this and with that i'm going to explain the important functions and methods that can be used to fetch data in next so what we want over here is we're going to create a page inside of our application which um will be a page for the coin right so we're going to display a list of coins inside of our project and we can actually click on the coins and go to a specific page where it will show the information of that specific coin so if you're confused a little bit about this don't worry it will become clearer as we go but since we're making multiple pages related to to this specific thing for example we're going to have the page where it lists all the coins we're also going to have the page where we get an individual coin um we're going to create a folder over here called um coin right and or coins something like this and then we're going to press enter and inside of here we're going to create our index dot gs this means that now we should have a coins route in our application so we'll create over here a function which is going to bear component and let's call it coin list and then set it equal to our function and in this page over here in this component i want to fetch data from the cryptocurrency api which by the way the link for the api will be in the description it is completely free um with no api keys super easy to use and then i'm just going to say coin list right so we want to fetch the data for all the coins and just display them inside of this component so how exactly would we go on doing this well i'm going to return it there for now and now how exactly would we fetch this data well there's a few methods in xjs used specifically for this purpose the first one it is the probably one of the most common ones is the get static props function so this function and it's written like this get static props well this function is usually meant for fetching data from an external api or database and um basically this returning the data and setting it to the props of a component so that that component can use that data and the data is fetched and what would happen is um basically when you build your project uh when you build your website um next chess will pre-render this page at build time um using the props uh that are returned from this function right so it sounds a bit confusing but it is extremely important right the way we use this is inside of our component where we want to fetch the data instead of having to create a use effect like normal react creating states whatever all those stuff and then using some sort of library to fetch the data what we do is we come over here below the component and we say export const we create this function with the name get static props it has to be this name then we create a function right we make this asynchronous like this and then inside of here we make our api request so i'm going to be using something called axe use to make this request x use is like fetch i've used it so many times in my videos um it's really easy to use um it basically just serves as an easier way to fetch data right and i'm just going to use it because i find it very simple you don't need to use it if you don't want to but i'm going to install over here axios inside of my project so while it's installing actually just finished i'm going to import over here at the top to import axios x use from the axis library and inside of here i'm going to try to make the api request so to make the api request we just say const data equals to a weight because this will return a promise and this is an asynchronous function and then we'll just set x use dot get and we'll put the url to our api if you're using a different api put the end point over here in my case i'm not i'm using um the the coin stats um api for cryptocurrency and this is the link i'm gonna add okay here it is this is the url for the for the api that i'm gonna be using this should return a list of cryptocurrencies um again this link will be in the description if you want to so we'll get the data and if we want to access this data which should come as like a a list of um of crypt of the coins um all we have to do is we just have to return this an object with the property props and inside of props we'll return some sort of key for this data i'm going to call it coin data and set it equal to data and since this is axios to actually access the data that was given from the api request i have to say data.data right so what is happening here is we're fetching the data from the api and we're just returning an object with the property profs and instead of props it's an object with the property coin data and coin data represents the data or the list of coins that we're getting from our api but why are we doing this because now if i come over here at the top in coin list and i destructure the coin data from here we can actually access whatever is returned from this function without having to create a use effect or any of that stuff that we have to do normally in react so for example uh let's test it out by just saying console.log coin data right i'll save this right here and let's check it out by going to our slash coins route because remember we named the folder coins right so if we come over here and we try to go here we should see an empty website obviously but the console now should have a console log of a list of coins which is exactly what we needed right it's listing out a bunch of cryptocurrencies with their names their um ids their pictures their prices everything like that um meaning that our api requests literally worked so what i want to do is i just want to display these coins inside of my project right how exactly are we going to do this well we have access to the coin so all we can say is we can just say coin data dot coins because if you recall in the console log we see coin data is an object with one key called with one property right or one element called coins and its value is the array of coins so to actually get the array of coins we have to say coin data.coins and then say dot map over here uh grab the the coin from this function and then just return for each coin let's just return a div like this and for each coin we can choose whatever information we want to see for example um in our we see that each coin it has an id um but it also has a name a price and a picture or an icon so i'm going to display those three things i want to first display the name by putting an h1 tag and saying coin.name then now we also want to display a good column ignore all of the stuff i talked about the image now we also want to display our image so let's just use a simple image tag over here and next yes actually has a built-in image component if you want to research more about it um you can do so i'm just going to use this image tag over here for simplicity reasons but you can use that one as well so for the image we're just going to put the source and set it equal to the coin the icon because that would be a url to an image of that coin and then finally let's add a p tag over here and say coin.price then save this and um you can see yeah it looks it looks good like obviously the ui does the css i didn't add any css but it is fetching the data correctly which is uh honestly amazing you can see all the coins over here and we're getting the data perfectly now another thing that i really wanted to talk about for the get static props is the fact that um inside of this function if you have for some reason um the like the parameters of the the file so for example if we had the profile over here and we have a file where the username changes all the time and we like we want to fetch the data based on um for example if the id of the coin is one and the url has one over here or if the id is two the euro has two if we want to get this information and use it to fetch the data in the get static props all we have to do is we just have to come to the the function and add and destructure the parameters from here we can say params and then if we want to get the id from um the url we just say const id equal to params.id so this is pretty simple um it's very useful in many situations so keep in mind this if you have a situation where you need to fetch data on a component which is a dynamic route so now you might imagine that get static props is used all the time which technically it is um i use it a lot in any next application the thing is there's other options as well like i mentioned get static props renders or pre-renders the the page at build time right so this is known as ssg which means static site generation there's a different method which is ssr which means server-side rendering and in order to do it we actually it's very similar all we have to do is instead of calling this get static props we just basically say get server server side props like this now we can save this and you'll see that if i refresh the page um it looks exactly the same right it's not because you can call this whatever you want because you can't if i save this with a different name that isn't either one of those two options you'll see that it doesn't work it literally doesn't work it has to be one of those two options at least for this case and the reason for that is because both of them have their own use case the get server side props is really useful for situations where you need to make to render the data at request time so what happens is um with get static props it will request the data um through the browser which which in some ways can be beneficial or it can be negative as well um but in our case over here with get server-side props it will run at request time meaning and we'll send the pre-re the data to the props when the page is pre-rendered um that means that if you ever need data being fetched at the request time or you need data that that must be validated through some sort of uh authorization something that has to like there's so many use cases for this but they're very specific so i would say that there's there's benefits and and drawbacks to using each one of them um it is important to understand what each of them do but i would say most of the time i would use the get static props because um most of the type of data that i use in my applications don't need in its nature to be um fetched at the request time now i've been mentioning fetching data at request time for a while now and i know a lot of you guys might be confused at what exactly that means well think about it this way imagine we have some sort of api that we want that keeps changing right the data keeps changing consistently the best example i can come up for that is um maybe some sort of um website like a a like a sports um like a sports website where you can see real time games happening or something like um a news website where news can occur at any moment and we need to like really be up to date with everything that is happening um then in this both cases it would be kind of bad to use get static props because it is only the data is only fetched on the build time right and the data can change midway through and now there's no way to get the data again well there is something you can do with get static props which would be um right over here now you can actually do something like this um or similar to this by using the revalidate um key over here on your return statement for get static props and um basically what it does is it will attempt to regenerate the page um when they record when a request comes in and it will try to regenerate the page at most once every how many seconds you put over here so you set an interval right i can set 5 seconds i can set 10 seconds but even if we do something like this which is really important and next it's called incremental static regeneration it's really really common to use but even if we do something like this it truly it won't keep the data up to date and that's where get server side props comes in because it will um will update itself um every at every request so um meaning that the data will be up to date so when i mentioned that get server side props is better in some cases i mean in this kind of cases where you have data that is constantly changing and you need to keep up with it now since this is rendered in the back end um there are drawbacks to it one of the drawbacks would be that it is considered a little bit slower than just rendering um just fetching the data from the client um but anyways like it it depends on your use case both of them are very useful i do use i find myself using more get static props just because of the nature of this method now there is other methods like the the get static paths um but i won't be mentioning in this video if you guys want to i can definitely make a continuation to this video because there's so much stuff in in next that i can teach and i feel like it would be better to just put it in a different video now before we end this video i want to show you guys something really cool right um i want to show you something that will make you understand why next is so sought after right i just opened up over here a page or an actual page using xgs and a page of a website actually created way in the beginning when i was learning react this is a sorting algorithm like visualizer i've never actually made a video in this but um it basically just sorts arrays i did this to learn data structures and algorithms and i used it while applying for jobs as well but bottom line this isn't related to the video the whole point is that i actually built this using react and not next gs right this is fully react um so why exactly would um we use next instead of react well the main difference in my view is seo and here is how seo comes to play like i mentioned throughout this whole video with react you have a simple html page rendered in the beginning and then you download the javascript which then puts all the other ui stuff inside so initially for bots um who are trying to rank your page on on search engines your page your page will basically just be an empty html page this is the source code for this um basically this is the whole source code for my react tab obviously there's barely any ui on here right there's nothing that i wrote over here and none of these words you can see on the source code and this is what a bot will see which is a major issue because um we want our like bots to see keywords in our website so it ranks our website higher on google or other websites now if we come to a next step you see there's bitcoin over here there's a theorem there's a bunch of words in this website and the important thing is if we click over here to see the page source you'll see that yes every single thing appears because this is how next works right it shows not only the ui but it also shows the data we got the props everything which is amazing because now we have a bunch of keywords in our website which will make our website be ranked a lot higher and make our s the seo for our website much better than what it would be with normal react so i really wanted to leave this to the end because i i feel like it's a it's a shock factor for me uh i realized how bad with seo i was while i was just using react for projects that i needed seo um and how different it is with next so that's that's basically it i really hope you guys enjoyed this video if you enjoyed it please leave a like down below and comment what you want to see next ask me anything you guys want to know about nextgs and i can make a video about it um and let me know what you guys want to see next so that's basically it really hope you guys enjoyed it and i see you guys next time [Music] [Applause] [Music] [Applause] [Music] [Applause] you

Channel: PedroTech

Views: 88,798

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, nextjs, nextjs tutorial, next js for beginners, next js tutorial, nextjs firebase, next js, next js vs react, next js getting started, server side rendering

Id: tsmaQdgidKg

Length: 56min 0sec (3360 seconds)

Published: Thu May 12 2022