Next JS Tutorial - 3 Hours | Learn Next.js From Scratch

so what is going on youtube my name is mehul and welcome back to another video where we're gonna start with a brand new course a brand new web series using nextgs so nexus is an awesome piece of technology if you have never used next shares but you are a react developer you're missing on so much so in this whole web series in this whole course we're gonna be looking at next year's what it is how it works and how you can work with it in a professional manner in a manner in which you can develop very high quality production ready applications um i have built codedam.com completely on next year so yeah i mean whenever you're using codedam.com it's built using next year's technology now one thing i want to make sure here is that i'll be posting this course on youtube but this course is going to be available on code damn as well as a standalone course and as well as you know a part of the next chase mastery learning path so next year's mastery learning path is this learning path right here you can see on code damn site so we're going to be following all these things right so i would have this content on youtube as well but the content on youtube would be published late so if you're somebody who's watching this video please go ahead and register on codedumb.com it's free you can register for free and yeah you can just stick along on youtube meanwhile the course is getting completed or you can register on the code damn website start watching the course there the learning path for next js is going to be free at least for the development part i'm assuming that you are interested in learning about next year's in depth so we're going to be covering a lot of things you can see uh we have a completely dedicated next year's learning path on goddamn.com so yeah i mean i'm just trying to bring value as much value as i could using both platforms youtube and code damn so it would mean a lot to me if you could just go ahead sign up on the website because that would let me know that you are interested in the further courses in the future courses as well so that would be all for this little quick um you know kick start to the course from the next tutorial onwards we're going to be starting off with nexus and the actual formal official course so that's all for this video see you then in the next one so what is going on everybody welcome to the very first video for our next js course and in this course in this whole web series we're gonna be working a lot with next years we'll be developing a lot of projects on the way we'll be learning the ins and out of the framework so if you're watching this course on code damn you are going to be updated with the latest next year's frame books as they roll out currently it's 9.5 and yeah if you're watching this on codedone.com and if there's any significant change the contents would be added again to the framework if not to the to the learning path if not then please go ahead and sign up on goddamn.com for watching the same content all right with that being said we're going to be exploring a lot just like i said in this in this whole web series but starting off with some prerequisites some requirements i would say you must have for this um next year's course obviously the first thing is that you know if you are a react developer please and please only then follow along with the course this course is not for people who are extremely new to react or who are extremely new to html or css and you probably know this if you have been following the next year's road map on code dam which you can see right here with us so we on the uh next year's roadmap we actually start with the basic html and css skills then we build some javascript skills then react fundamentals and then we come to next js so this is very important you must have basic html css javascript and react fundamentals with you before you start working with nexus because for the most part nexus is going to contain a lot of react code a lot of um best practices of react code a lot of react so this is one thing i want to just put out there if you do not have access to if you do not have knowledge for the html css and react you can always go to the next year's mastery learning path you can find all the links and get started with those topics first so yep that's what that would be all uh for the learning path at least and for this whole course we're going to be building just like i said a lot of things along the way so i'm pretty excited to start this course i hopefully i hope that you are excited as well so let's get into it and we're going to be learning a lot of things in this whole web series everyone welcome back and in this video let's just go ahead and go over what next js really is and why it is needed so next chase is a rapper to speak as of you know in the in the simplest terms i would say next year's is a wrapper around react framework which enables your react code to pre-render which enables your react code to run on the server what do i mean by that well you see when you're working with a react website which is just the client-side javascript code what happens the process is that firstly your client would down will download the code from the server then that javascript code would be executed by the browser and then you're gonna see um the actual output on the screen the actual html elements and divs and all that but if you take a look at sites which are built with next shares what you're gonna see is that if you go to view source you could pretty much see all the content within the html document itself right for example i can just search this text pre-rendering right here and this is the h3 tag which we are seeing right now right this is statically generated and server side rendered react applications and this is what we are seeing so you see that in this case in the case of nexus the server is actually sending you the html itself but in case of react applications the server sends you javascript bundles which is then executed by the browsers and then the the output is displayed to the user now this is one of the many benefits next year's brings in but this is the most important one right everything else you know zero configuration fully extensible static exporting let's just leave that because that is also sort of pre-rendering only css and js ready for production all these are actually possible with just react as well but with nexus with these two features basically the pre-rendering one because this is just a side effect of that but because of pre-rendering it opens a lot of doors for performance for seo for caching stuff like that and it is it is awesome the only thing which nexus truly does which which makes all the difference is this thing that is server side rendering of react code on the server so that your server actually sends html instead of javascript bundles on your screen so this is what next.js is about in a nutshell and yeah that is that's why i wanted you to have a basic understanding of react because in next we'll be following certain practices said by the framework we'll be following certain patterns certain design patterns but for the most part because we are writing react code itself the principles the underlying principles remain same so yeah that's pretty much it for this video hopefully you understood the difference between next and react and why it is needed um we'll come to performance benefits seo you know stuff like that later on in the series because that's technically not related to the coding part directly um it's more about the user experience and the marketing side of the things but that is very important as well so anyway that's all for this video if you liked it let's just move on to the next one really quick so what is going on everybody welcome back to another video in which we'll be starting off by setting our next js project so first things first what we want to do is on your systems go on your systems and make sure that you have node and npm installed and i'm assuming that you are a react developer you have some sort of experience with react so you should have that by default once you do have that just go ahead and write npx create next app and just go ahead and write the name of your project in our case it would be hello next you could have any name here you want and the next thing is i'm gonna pass in a flag called dash dash use npm now the reason i'm passing this flag is because i have both yarn and npm on my systems so i want to use npm that is why i'm using this thing and for the matter of fact what this npx is how this all is working if you want to dive deep into this we have a dedicated course for npm mastery as well on code dam hopefully you're watching this on goddamn.com so you can go ahead and check that out as well if you want to learn more about how npx and everything works so once you have that just go ahead and hit enter and it should be up and ready in a couple of minutes now mind you that we would be using typescript in this whole course because typescript is a production ready technology it enables you to write high quality code while suppressing a lot of errors which might just slip in so you get all those benefits of static type checking and auto completion and jumping in code here and there and refactoring and all that stuff so it's a pretty decent deal so once we have done that once the project is initialized let's just go ahead inside the folder hello next and let's see what's going on here so if we take a look inside the files section okay i think we did not really open that correctly if we take a look inside the files section all right so you can see right here that we have some js files and not a lot of activity going on right we have some regular package json files and everything and i'm gonna get to the whole directory structure later on in some in the next video but for now stick along with me and let's just go ahead and convert these into typescript so it's as easy as doing this with next js right just make sure your extension is tsx for the files which actually use jsx and you could go ahead and keep it dot ts for the files which are you know just pure typescript or just pure javascript right once you do this it should be enough now if you're coming from a typescript background you're gonna immediately notice that we do not have a dsconfig.json here but the thing is that nextgs can automatically take care of that how awesome is that so i'm just going to go ahead and create a file called tsconfig.json i'm going to keep it empty this would be handled by nexus we don't have to really mess around with initially at least and what i'm going to do is we can see that we just have three dependencies at the moment next react and react on so what i'm going to do is i'm going to install a couple of mores which would enable us the type support and all the nice features of typescript so i'm going to install typescript right here i'm going to install the node types which is going to enable us to write server side code and i'm going to install the react types which is going to give us autocomplete on the client side code for react and i'm going to say this as save def because these are dependencies which we don't really want on production because on the production next yes would automatically be you know compile down to javascript and all that good stuff so once you do that we are basically done to see our hello world now you might see some of these errors but don't worry about them these are all false positives they would be all rectified once we fill up this ds config so to do that we're going to go ahead and write npm run div which in turn is going to go to package.json and see that we have a dev script which is going to run next if and next f is magic it is going to take care of the server initialization compiling your typescript you know how to auto uh reloading hot reloading of code fast refresh all that stuff all that good stuff out of the box it's just magic so we go ahead and run this and you can see that it says to me that we detected typescript in your project and created a ts config json file for you so that's very nice of next js right and you can see that we get a nice little populated tsconfig.json file with us plus a next dot enb ts file which is a typed file but we don't really need to worry a lot about this but for the most part you can see that our code base is purely in typescript we don't have any javascript yet but we can still go ahead and visit this url that is localhost 3000 and we're going to see that we get a nice little page creating us welcome to nexjs we can in fact go ahead to index.tsx and change this from next shares to next ts because why the hell not and you can see without even reloading with the help of fast refresh we get immediate update to our page so we're going to explore a lot about what these technologies uh what what sort of architecture next year's follows and what's actually happening in the main app itself but for this video i think this should be enough to get you started with next year's hopefully you were able to follow along till now if not let me know in the discussions below i'm gonna get back to you if you are stuck anywhere that's all for this one i'm gonna see you very soon in the next video hey everyone welcome back and in this video let's just go ahead and explore our project a little bit because we haven't really seen what's going on here so i'm just gonna minimize the terminal for you and i'm going to close these files now what we see it on our left that is the file structure it's pretty interesting now the reason it is laid down in the following sense is because nexus requires a specific file structure which is not a lot of technologies which is not what a lot of technologies do outside there and it's sort of you know some people like it some people don't like it but this is what it is at least for now with next.js so what's going on well first things first you see this public folder right whatever you put it in the public folder is going to be directly accessible on your root domain in our case you can see we have two files that is favicon and versal so if i go ahead let me just go ahead and bring this right here if i go ahead and just go to [Music] versel.a in my url you can see right here i get the versa because this file was put right here right similarly for fabricon if i go to that url you're gonna see we get our favicon right here if you could just see it in the dark if i create a file let's say robots.txt and if i say hello robots you know stuff like that save that file go to robots.txt what you're going to see is we get the same file so it's basically a directory which next chase uses internally to serve off files as it is now if you create an index.js or anything it would not be processed by nexus it would not be executed as a node command by next years it would be served as it is right so you have to be careful about this whatever you put inside the public directory is directly accessible by anyone right as as the raw source thing and a good thing is it does not matter where your contents is as long as it is in public directory so you can have a bunch of folders for example a b then you can have c dot txt and you can say hello there and how it would be accessible is pretty much a b c dot txt just like that right so it's just going to follow the whole direct directory path and reach out to that particular file just like it would work on a file system so it's pretty neat because you know now you have a one-on-one pairing on how you are storing your files and how they are served right most of the frameworks like express provide that as well with the static express.static middleware but the nexus provides that out of the box without you writing any code or any configuration so this is about the public folder in nextgs there's another interesting folder you can see pages which is basically the heart of our application which is basically our source code would live right so we're going to discuss a lot more about pages um as we go on because this is like the central part of the routing system as well but for the most part the styles folder is not really required so you can go ahead and move the styles folder inside public as well i mean that would just make your styles accessible through a url instead of like bun link but it won't really matter right because your css is visible anyway so you can or you if you can if you want you can keep the styles in a separate folder or you can move them inside the pages folder itself right so if you do that what's going to happen is you can delete this styles folder so to just get rid of a new folder and right here instead of importing it like this now because you have deleted it just import it like this right and inside index.tsx as well just import the home.css style directly so if you do that and if you go ahead and go back on the page you're gonna see it pretty much looks just like before right and yep that's basically it for the whole structure so now you more or less have only two folders pages and public which are a must to have in a similar way well actually there's one way to have pages as well so you can create an src folder and then throw in pages inside that that would also work just like it is working right now but i'm not really getting into that so i'm just gonna remove my src folder for now but the idea is you must have two folders the first one is public for static assets and the pages folder for your source code which is responsible for running the node code and rendering your react code on the page as well we're going to discuss what this api is later on it is something special not really related to the rendering part but yeah it is special so that would be all for this video i hope you liked it i'm gonna see you pretty soon in the next one let's get there so what is going on everybody welcome back and in this video let's just go ahead and explore the pages directory a little bit now we are not really going to explore all the routing part just yet but pages provide a very powerful yet simple to maintain routing mechanism in next years so what happens with pages is that whatever file nextjs finds ends with dot ts dot tsx dot js.jsx inside the next.js folder inside this pages folder it would create a path of that or to or to speak in the in the reverse way whenever you visit something which is like your website dot com slash my page next yes is going to find mypage.tsx basically resolve that my page module inside the pages folder and it's going to return that component that react component to the browser enough of talking let's actually see what i'm saying there's just one exception to that and that is the index.tsx that is index.tsx is actually available on your root domain and not on slash index right so if you go to slash index you're going to get 404 but if you're on your root domain that is where index.tsx is actually displayed so what we want to do really is let me just go ahead and trim this down real quick because we have a lot of code right here and i'm just going to actually just get rid of this as well i'm just going to say we have h1 hello world right here and maybe i can just even get rid of that so we have a very very small and very simple react component with us here and if we go on the page you're going to see that is exactly what we get but hold on if we go ahead and take a look at the view page source you can actually see hello world written in the html itself now this is not something that happens when you're using react right just go ahead and try out an application with create react app create a component which says hello world and display it and go to the page source and you're never gonna find this h1 hello world tag there so what really happened here is that this page this component was actually rendered on the server by next years and it was you know crunched into the html and returned to the client this way this has multiple benefits in terms of seo and performance but the most notable benefit you can see is the client now when the when the page is loaded is never waiting for any sort of javascript to execute for displaying the content which increases performance a lot for the client side right so yeah that's that's basically how the pages thing work so if i go ahead and create a nice page dot tsx for myself and if i just go ahead and copy paste this whole thing and i say let's see this is a super nice page hit save and if i go ahead on nice what was that nice page here nice page you can see i get it this is a super nice page right of the bar out of the box i had to do no routing i had to you know just write nowhere i have to write like if i go to slash nice page this should execute it is automatically handled by nextgs and this is some sort of behavior you cannot really change at the moment so you know you just have to return a component here you cannot just just return for example you cannot just return to here because if you do that you're going to see you get an error that the export is not a react component so the default export from your any file inside this pages folder just ignore the api folder for now any file inside this pages folder which is a javascript file should export a react component right as a default export once you do that it's just going to work just like that right you can create as many pages as you want nice page 2 dot tsx this is also a super nice page right and if i go to that we get this is also super nice page all rendered on the server side this is also you can also see this it is available in the source code and as we create more and more complicated apps you're gonna realize the importance and benefits of this plus the fact that you do not have to customize anything out of the box is just mind-blowing i mean this the setup works right off the out of the box it is type script react jsx webpack babel everything hidden away from you nothing is available right so nothing is actually visible but you can actually get find control of everything if you want by a file called next.config.js which we're going to discuss later on but you know this is this is something i love about nexus it's simplicity to start and it can grow as complex as you want when you want it right just like it just like every framework should be so this is all about pages introduction to pages we're going to learn a lot about pages and routing and everything in the routing section but that's all for this video i'm gonna see you pretty soon in the next one hey everyone welcome back and in this video we're gonna be taking a look at a special file known as underscore document.tsx now this is a special file because just like i said when we create it it's not going to be available at slash document.tsx but in fact it is the file which is responsible for all the other things in your document right so you see that we wrote this here this h1 here inside our index.dsx with a div but we did not really write all this other things stock type html html head you know all these scripts and everything we did not write that so how did this came as a response well that is precisely what document.tsx allows us to control but for the most part we don't really want to mess up we don't really want to you know just just mess up with the next js things document.tsx is used for um you know injecting our own custom code injecting our own custom scripts which we want to be available for the whole application so what we want to do is just go ahead oops inside pages create a file called as underscore document.tsx and first of all just like i said we don't want to mess up with next shares so what we're going to do is we're going to import certain things i'm going to import html head main and next script this is um i think what is required from next slash document and what we're going to do is we're going to actually export a class this time not a function now bear with me we're going to export a class custom document why we are doing this instead of a functional component is because we have to extend our original document and why is that because it implements certain methods certain certain functionalities which are important for the next js to actually use right i'm sure there's a way in functional components as well where we can assign this document somewhere in the prototype chain but the best way the cleanest way is to just make use of class based component in a single file you know just just bite the bullet and use it for once in your whole application because document.tsx would honestly be a very small file even after you customize it so what we want again with class based components we just need to have a single render function and what we want to return is basically the whole structure right so we want head right there don't really focus a lot on these tags right now we're going to be making use of head again somewhere in the next videos but i don't really want you to get confused with this head right here so i'm going to keep that blank we're going to write main and finally we're going to write the next script as well right and actually the main should really go inside the body which is a re regular html tag you know and let's just restart the server once because it does not really capture changes for document and app and if we reload now you're gonna see nothing really changes but what we can do now is that we can go ahead and inject something like meta property custom and then value i don't know yolo something like that right and it's uh i don't know what's what's the content yeah so here we have it refresh you can see now that we have a meta property custom and content yellow right now the point is that this is actually available on every page even on pages which are 404 right so you can see that we get 404 this page cannot be found but we still have the yolo property available for us because this is the absolute base template which is used by nextgs for rendering things for rendering your page right so a bunch of things use this file as minimal as you can number one because this is a root file this is something which can control your whole application so you never really want to mess a lot with the global files so just just you know use this file if you want to probably inject some sort of metadata which is for verification purposes of your website or i don't know just keep the usage of this file to minimal because for the most part you will be able to customize all the titles all the head stuff everything using um the actual you know the actual pages which are available right here so you can do all that stuff from here as well so you know if you want to inject a particular script you can use that this would be available then throughout the web pages throughout the website some analytics scripts anything you can do that so yeah i mean that would be pretty much it for this video and in the next one we're going to be exploring another file called as underscoreapp.tsx which is slightly different than this one and we're gonna be understanding how's that so that's all for this one and i'm gonna see you in the next video hey everyone welcome back and in this video let's just go ahead and take a look at file in next.js so again just like document.tsx underscore app.tsx is also a special file so i'm going to go ahead and create that but it's a little bit different than document.tsx and a little bit simple as well to set up the first reason is obviously because you can go ahead and export a function directly out of it so what should you write here well let's just go ahead and try to return h1 hello from here right and let's just start our server so we have a server running on port 3000 and if we reload the page we get hello something's not right if we go ahead on our index.ts6 page what we could see is that actually let's just go ahead and rename this as app so that we don't get really don't really get that warnings but we see that we have here on the index page so you know i am index page and not hello if i write that hit save refresh but we still get hello hmm that's strange if i go ahead and write here i am page 1 and if i go to slash page 1 we still get hello if i go to 404 which is no page we still get hello so what's happening well if you could guess this app.ts6 is actually responsible for rendering all of your pages right so when you are returning a constant component that is just a single file what's really happening is that you are you are executing none of the pages here so how do we execute pages well next js actually passes two things here the first one is component and next the second one is page props that is the props passed to the component to this component by nextgs internally right and because this is rendering right now we can just go ahead and do something like this so we're gonna write component right here and i'm gonna just destructure these page props now if we go ahead and take a look you can see that we get the correct 404 page as well as if i go to homepage we get i am index page and not hello and everything is just working fine right so basically this is the end point for you know just just just updating the pages in a way you want before they are rendered now this is a little bit different than the actual um you know the actual document.tsx page we have and how is that different i'm gonna show you let's just write a very simple console.log statement here which says hello from underscore app right and what i'm going to do is save this and go ahead and refresh the page so when i refresh this you can see that in a node console we got an event that is a console which says hello from app right that means that this code this function was actually executed on the server as well right this is the node process this is executed we see this console that means node somehow executed this right at the same time if i go ahead and take a look in the console on the browser we get hello from app here as well that means this is executed this component this code is actually executed on this on the client as well irrespective of i am page one being on the page itself right so what we are what you're really seeing here is one of the core fundamental concepts of server side rendering that is the content is available as plain html as well as as soon as the javascript of that particular page is ready in our case the javascript which is of the component the hooks and event listeners and everything when they are ready they are automatically attached to your page right so for example if i have something like you know h1 on click um alert hello if i have something like this now if i go ahead and refresh this page you can see if i click on this i get a hello alert but if i go to the paid source you're gonna see i get no such information inside javascript right here right it's just a regular h1 so what happens initially is that i'm displayed i am page one and then when the javascript is downloaded and rendered completely event listeners and everything is attached to it that is why we get an alert now if i disable my javascript and run this i'm still gonna see on page one but there would no there would be no interactivity so what's really happening here is that this code this function is being executed both on the server obviously for server side rendering and on the client as well with document.ts what's happening is that things really execute just on the server right so if i go ahead and write here hello from document.tsx hit save you're gonna see that if i go ahead and reload this we get hello from document.tsx but we get nothing such message from on our console why because you can clearly see that document.tsx although it returns a react component although agreed that it returns a react component but it is actually forming the page structure the overall page structure right so that means it is only rendered on the server to create those html and head and you know those those those custom next js scripts and hooking everything in nicely but it would not execute any javascript which is available inside this page right away right so if you have you know component mount or anything like that that is not really going to happen because this is not a component this is your actual root document which is being rendered through this component file right so it's sort of a uh i don't know it's sort of a lie as to say that it is a component it is not a component it is your actual document which is being rendered so it won't really make a lot of sense if you have component in mount here and there right here because they are more suited toward pages toward individual pages in our case it could be index.tsx where you can have a use effect which is you know once the page is ready that is once the page is mounted you can just say alert hello right or maybe you can just you know if you go back to index you're gonna get that hello right here or you can just go ahead and you know just override that behavior for all the pages right here so the fundamental difference being between app.tsx and document is that this file is used to create the overall structure and the code in this file is never executed the javascript code on this file is never executed on the client side whatever you know the html string and everything which we get from this file is put as it is on the source code and it is not executed as per say on the client side end so we have some uses for app.tsx which we're going to discover as we move on but that was mostly it for this video and if you like this we have a lot of things coming up so just hold on so that would be all for this video i'm gonna see you pretty soon in the next one hi everyone welcome back to another section this is our styling section for next year so we're gonna learn a bit about how we can use css and sas in this section and ways to implement styling with nextjs so it's going to be interesting let's just stick along and see whatever we can do with nextgs in this video okay so we are in our index.tsx page which is our main page for next.js this one right here right and what we are what we want to do is we want to add some styles and effects and everything to the page so first things first let's just go ahead and actually remove all the styles from our application and i'm gonna for the moment i'm gonna actually let's just go ahead and see i'm gonna actually remove our app.tsx file as well because this one is a special file we're gonna get to that later on and there we go right so we just have let's just go ahead and remove these two pages as well because well they're just trash so here we are now we have just have a single page right here and actually we might need a server restart maybe because of that and let's see if we are ready to go and yes we are so now we have a very basic hello world with us no styles nothing at all if we just take a look at the source code as well we have some javascript and everything but when you're gonna compile it you're gonna see for production you're gonna see that all this javascript is also removed right so what we really want to do is try out the js6 that is styled jsx in nextgs which means css njs now personally speaking i don't really like this very much but i'm gonna still explain to you but i won't really recommend as a person who has used react to go ahead and follow this because um we are already mixing the html sort of thing that is you know the jsx part with the logic in our react components the least we can do is keep css separate in a separate files and given that nextgs actually has first class support for that as well i'm gonna recommend not to do that but anyway let's just go ahead and start so i'm gonna say this is a simple div for us and i'm just gonna write a real style jsx tag right here which means that whatever i write inside this now is going to be our css for this particular component right so what i can say is i can just give it a class name of title and i can say title has color of red right hit save and you can see that our title turns red but this is special because if i go ahead and i'm not really sure if i can just show it to you yeah maybe i can so let's just go ahead and create a function let's say heading right and i just return h1 props dot heading right here and i'm gonna have props right here and instead of this i'm going to say heading heading is heading well a lot of heading right there but what i'm going to do is just go ahead and move it right there oops i think i lost my uh copy paste because of that but anyway that wasn't a lot of code anyway so h1 color red there we go so what i'm trying to show you here is that this is still the same but if i try to use h1 here now what you're going to see is that it's black it's not red whereas we specifically told the h1 to be red here right so how does that work well you see whenever you're using these style jsx styles it's going to be component level styles right so nexus is going to make sure that whatever you write inside this is just limited in scope to your component it does not matter if you're using classes or does not matter even if you're using um you know direct style elements and how does it do that well you can obviously always go ahead and inspect this bad boy with the chrome inspector and you can see immediately that actually next js is going to add a class to every element inside that particular component and instead of targeting h1 directly it's actually targeting h1.jsx and that id of that particular um heading and then it's saying color red right so what happens with this one well obviously you might have guessed it does not have any class at all so it's just black just regular you can go ahead and make this global by saying global right here and if you do that and if you refresh now you're gonna see that we have um a global h1 as the color right so what just next is what it just did is that now it's not really modifying our styles it's just putting them as it is on the page well this is all about you know style jsx for the most part there could be a bunch of things as well you can for the most part it is used by people who want to have variables with javascript inside css so now you can have you know just just red so you can say if math dot random is greater than 0.5 then you want red otherwise you want blue and once you do that you know whenever you are refreshing it you're either getting a red heading or a blue heading depending on how the math not random plays out right so that's that's the idea that you can go ahead and use javascript variables inside css but for the most part you never really need to do that at all because css support is in itself very good these days so personally speaking i won't really recommend anyone to use style jsx that is you know css inside javascript unless you want to use that and you have a legacy code base which uses it but if you are somebody new just go ahead and watch the next videos next few videos on how to actually implement same functionality that is component level module based resolution but using much better approach much cleaner approach in which you can keep your components separate so that would be all for this video i'm gonna see you very soon in the next one so what is going on everybody welcome back and in this video let's just go ahead and take a look at a cleaner much better approach on adding global styles and actually styles in general in this section to our next.js application now for doing that we need to create at least for the global file global styles we need to create a file called as underscoreapp.tsx we discussed that in the previous sections so it should not be a problem so this application this app.tsx is a very simple um you know non-customized app at the moment but what we really want to do is just import our global right here now the naming convention is again a little bit important here first things first it is not necessary you name it global.css you can name it main.css as well it's just going to work just fine right so you can see that we have a dot red class which gives a color of red and inside our index page we have a class name red assigned to a heading and we have a heading right here so if we go ahead and restart the server just restart the page and just refresh the page we're going to see that we get our heading in red and that is because of the red class which we have inside our main.css file right so this is how the global styles are going to be applied now you might ask me that what would happen if you just go ahead and you know just just throw it right here shouldn't that really work not really because the way how nextgs guys came up with you're going to get this error it would say that global css cannot be imported from other files other than your custom app so what's happening is that next.js is considering this import as a global import it is it is considering that hey if you want to import this as it is that means you want to apply the styles everywhere and it does not really let you do that because you know components styles can overlap with each other if you have overlapping classes so it throws you an error and you cannot just view your application so with that being out that means that you know just importing css like this importing main.css or style.cssr you know anything like that.css it's just possible in dot underscore app.tsx but hang on we're gonna see another way in the next video but for this video what we have right here is that you can go ahead and make use of the global styles using a css import inside underscoreapp.tsx only it would not work in a page it would not work in any other file if it is not underscore app.esx so this is how you're going to make use of you know global styles and you can just go ahead and play around with anything you like here it would be available as a global style so that would be all for this video i'm going to see you pretty soon in the next one hey everyone welcome back and in this video let's just go ahead and explore how you can import component styles um in your pages by that what i mean is that whatever styles we import are available only to your component so the first thing first we have seen that you know main.css does not really work very nicely because we get this error so what's happening is that nextgs has actually created a way to import the files the css files inside your typescript or javascript components and that is only when your file name ends with dot module dot css so you have to make sure that you name your file as main.module.css if you want your file to be available only to a particular component the your global file would still remain um you know just just the main.css or global.css or whatever you want but anything which you import in your component in your page should be like this it should be whatever the name for example in our case it would be index which i'm just going to create index.module.css right so that's what we are doing now so i'm going to say red again just give it a more specificity just a little bit of css weight and i'm gonna make this color green right hit save and if i go ahead and just do that what's going to happen is that if i go ahead and refresh what we're going to see is we don't really get anything because because by default you have to import it as like this now you can go ahead and make use of styles dot red like that right so now if you go ahead and see you're gonna see that you actually get the green color and you can see that it has actually bound your style to a specific class so how you have to use this is by using um class name and then writing styles which is what you imported from the css file and then the name of the class which you're using right in our case it is dot red there's a way to make it work like this and like this as well but it is not available natively inside next js as of now so if you want to do something like that you have to write custom configuration inside next.config.js and we have some videos at the end which are like covering the advanced aspect of nexus which go over that aspect so if you're somebody who's migrating this is especially useful for somebody who's migrating existing code base to have this feature you know just having an import style which should be local to your module to your component and this should work right away so this involves the use of a babel plugin but yeah that is possible but is available at the end of the section end of this whole course basically so yeah i mean for the most part this is how you're gonna make sure you work with um the css modules the css components in nextgs just import them like that and you're good to go so that would be all for this video i'm gonna see you pretty soon in the next one so what is going on everybody welcome back and in this video let's just take a look at how we can use sas inside next js and sas is basically for those of you who don't really know it's sort of uh you know just like how typescript is for javascript sas also adds a lot of power to css and compiles towns to css only so next year supports sas natively you just have to go ahead and you know just just rename we're not going to rename the global file we just can rename the component one and what i'm gonna do is import it just like this and that's it that's all we need really need to do i guess if we could just refresh restart the server once that would be awesome and if we go ahead and refresh it we are probably gonna see i think we have yeah i guess we need to install sas first that's that's the only thing we need to do because nexus won't really ship with sas and i'm just going to save it as a development binary also because we don't really need sas on production anyway so once we have that i can run dev again and we should be up and running in no time so if you go ahead and refresh it now you can see that we get still the same behavior but now with the scss that is a sas file the benefit of this well to start with you can now nest the styles so i can say this is color red and if i go ahead and write a span here and i say i am red and c so we can get red here and heading like that and it just nicely compiles down to our css but it is much more maintainable when you're using sas well you get support for everything now the sas variables um you know if you want to create some sort of duplicate styles over and over so you can write a function in sas you can loop over stuff so all that stuff but for the most part you're just gonna make use of the nesting a lot so that is that is what it is sas ships out of the box as well sas support shifts out of the box as well with nexus you just need to install the sas package and you are done so that's that's pretty much it for adding the sas support to our applications as far as i'm concerned because next js other than that inside of the css moduling system follows the same thing as inside the sas moduling system follows the same thing as css one that is you need to make use of you need to end your css files with that dot module.scss and so on and so forth so that would be all for this video i'm gonna see you pretty soon in the next one hey everyone welcome back and in this video i just want to take a little bit of time to just tell you how you can organize your pages in xjs so that you don't have a lot of clutter here so how you should technically create things is that inside pages just create a new folder actually inside pages create a new folder with whatever page you have for example this is my page one right and now inside this page one create an index.tsx file when you do that what's going to happen is that your page contents are still accessible on your domain.com page one but now all the contents all the relevant contents in our case it would be just tsx file and the styles file would be available inside this page one only so we can have a style start module.scss right here and i can just go ahead and say that you know red is a color red right and now i can go ahead and just say export default function page one is uh you know return h1 class name oops and then styles dot red and let's just go ahead and import the styles from our styles.module.scss file right so this is all we need and now we have a nice little page with us which has the the view and the logic and the styles part separated so if you go ahead and view page one right here what you're gonna see is that nothing happens because we have no content there but once i write hello there we get hello in red so that was just a quick little you know instruction on how you can organize things i prefer folders and actually folders would be very helpful as well when you're creating dynamic routes and stuff so just keep that practice with you when you're starting off so that would be all for this video i'm gonna see you pretty soon in the next one so what is going on everybody welcome back and in this section we are going we're going to be exploring the api section of nextgs learn about what that is how you can work with that why is that useful and maybe just create a little bit of small application around that as well so pretty excited to start this section and uh yeah let's just do it i'm gonna see you super quick in the next video all right so when we started the project you must have observed that we have a api folder as well inside pages which looks something like this now what does that mean why is it different let's just discuss that in this video so this api folder is special in the sense that the files you create the typescript or javascript files you create in this folder should not return should not export a react component what do i mean by that let's say let's see so if i have of let's say a file name that's randomnumber.ts right what i have to do is just export default function and here it should not be a react component because for react components we have pages right but for the files inside api folder this is basically a rest api endpoint which you can use to return responses like json response for example so what i'm going to do is i'm going to get two parameters right here the first one is going to be next api request type and the second one is going to be next api response type response right so we can get those types from our next package and if you're familiar with express you know what this request and response are next year sort of also follows a similar pattern but the thing is you have to export a single function from a single file and this this end point right here is automatically available on you know for us at least it is http localhost uh 3000 slash api slash random number right so this is for us if you're running on a different port that's a different story for you so if i go ahead and save this file you're going to see nothing really happens because i think we don't have the server running so that's my bad but anyway if we refresh this you're gonna see that it keeps on loading now the reason it keeps on loading is because we are not really returning any response at all from this function right so let's just do us do this page a favor and say rest.json which is going to return a json response i'm just going to say you know status okay and if we take a look now refresh this you can see we get a nice little status ok response from us this is something which we cannot do with pages right if you try to you know there's just not any rest or request or rest here we cannot really do rest.return rest.json even if you try to do that i'm just showing you that this won't work because inside pages the next js actually you know expects you to return a component not just any api call so this won't work inside pages but this would work brill brilliantly when you are inside the api folder so when you say rest or json again this would look familiar to express guys it could return a json response to you automatically by just taking care of the content type and the status score status scores would be 200 in this case so this should not be a problem so once we have that in place um i think this is a pretty solid intro to the api and what we can do is just go ahead and instead of status okay i can say number is math dot random times 10 and this would give us a number between um zero to nine if i just flow it down that is right so now whenever i refresh you're gonna see that we get a random number every time um one three five eight stuff like that so this is a random api which is just returning us a random number inside of a json response and yeah that's that's how you're going to create a very simple api with nexjs so it could have a lot of uses for example if you're using jwt authentication in nexus you can use an api endpoint you can deploy these individual functions as lambda functions as well so they can upscale and down scale independently right so this is also one important benefit we can have you can use the lambda functions for oauth login as well for example sign in with google sign in with facebook apple stuff like that so there are a lot of good use cases uh i use these um on code dam as well um for the oath login especially so yeah that's all for this video i'm gonna see you pretty soon in the next one we are we are gonna be using this in a much more sort of organized way in some sort of application so that's all for here and i'm gonna see you pretty soon in the next video hey everyone welcome back and in this video let's just go ahead and explore the request and response objects a little bit more because i don't think we have done um enough research on them yet so because we are using typescript we can get all the benefits of autocomplete right at our disposal so if i try to write request dot you're gonna see we have a bunch of methods and properties enabled for us but some of the interesting properties let's just go over through them so the first thing is request.body obviously because you know if you are trying to let's just say if i console.log request.body right here and let's say request body is something like this so if you open this and if we go ahead and if i try to copy this api and let me just go ahead and fetch this real quick with a method of post and body of you know hello something like that right and hit enter so you can see right here i received on my node end the request body hello now this is actually beneficial in the case that i'm sending json data as the body so we'll have more tutorials on that in terms of authentication and everything but i'm just giving you an idea here stringify and i have you know something as username is admin and password is admin right and if i just do one more thing that is just just setting up the headers as well so that oops so that we have the content type content type as application json because that's what we want to receive at the back end and hit enter what we're going to see is that at the back end instead of getting a string which is what we are sending inside the body we actually get a parsed down object from the actual request.body so i can literally just go ahead and say requestedbody.username and if i perform the same request one more time it's going to give me admin just like that which was the username so this is the request.bodythink we have a little bit of other things as well so you have let's see request.cookies which might be important when we are dealing with cookies so we'll we'll just take a look at that request.headers is also interesting if you are trying to get custom headers out of a particular request then let's see what we have request.query is also interesting so if we have just like there and if i try to do q is equal to one here what we're going to see is in our request query this should be query obviously so our query is q equal to one and it is automatically parsed as an object for you so you don't have to really parse it yourself right then there are um for the most part this is what you're gonna use requested url is something you can use as well but for the most part that's not that's all you're gonna make use of right so this is how the request object looks like let's just take a look at response object now real quick so response we obviously have seen the json part with this thing so it allows you to send json responses but we have a lot of interesting things apart from that as well let's just start that so we have let's see we have json obviously we have rest.send in case you want to send um you know any other data which is not json right so if you want to send something like this instead of you know just json response you can use this so rest.send is going to take care of that again it's an abstraction over all the real methods which we have but for the most part it just works so we get three or four because we have already loaded this page once but you know it's going to take care of all the things then let's just keep on moving um we have rest.header which is also also interesting so we can have you know x custom header and i don't know we are open to hire people something like that just to add a little bit of interest to your application and for the most part we can just use this refresh and if you take a look inside your response headers now you can see that you have a custom header now we are open to hire people right pretty cool you can also use the set header to actually set cookie so set cookie could also be something like that and we can say are you programmer equal to true right and if i go ahead and refresh this now you can see that it sets a cookie and now if i go ahead and take a look at document.cookie we actually get our your programmer as true as a cookie which is set by the inside the browser useful for authentication again all right let's just keep on moving let's see what else we got so we have obviously the status code with us so if you want to set status code at 404 and response you can do that so you can see inside networks now we get a 404 as the status code of our document you can basically do any status code you like obviously just make sure you are playing inside the rest status code so you can do 4013 i don't know if you can do some ridiculous status quotes yeah apparently you can but don't really go ahead and try those can we do one three three seven no not really well you can do uh i'm a teapot i don't remember its status code it was somewhere around 104 or something yeah no not really anyway i don't really want to blow this up so i'm just going to keep it a status code 200 which is 200 okay everyone knows that right so this is again one interesting property which you can set let's see what else is interesting here um there's also a method which i remember which is rest.end right so rest.n can be used to just you know it's pretty much like just just status rest.send but rest.nd is more explicit that you are actually closing the response stream now hello how are you so if you do that and if you try to send more content down the line what's going to happen is that you're going to get an error from the server that cannot send set well you get this error but the actual idea is that you cannot really send any headers or body because the response stream has been ended so anyway that's pretty much it for um how we're going to interact a little bit with the rest and request and response there's a lot more we can do when we introduce middlewares and cookies and stuff like that which would be very useful in authentication and stuff but for the most part this is how you can get started with the api's endpoint so that's all for this video i'm gonna see you pretty soon in the next one hey everyone welcome back and in this video let's just go ahead and build a very very simple jwt based authentication inside next.js so first things first what i'm going to do is i'm going to go ahead and actually install i'm gonna say npm install json web token right so because this is a this is a package which would enable us to actually do a lot of fun stuff with json web tokens so i'm gonna install the types for this as well as far as i remember they are available so let's just go ahead and do that because that would enrich our experience of working with the package and yup so here we are i'm just gonna minimize this what i want to do is on let's get rid of the page one for now i'm gonna go ahead remove this and i'm gonna create a very very simple form back back in 80s like that input type text value admin let's just keep that and password has value admin as well right just give it a little br because i'm too lazy for actual css and input type summit value login right we can give it a form method post and let's see i'm gonna say action is slash api slash login right so once we do that what we're gonna see is actually let me just get rid of these as well once we do that and go to our home page we get a nice little form with us which is absolutely destroyed by my password manager so let's just leave that but what's going to happen is if i go ahead and rename this to login.ts and if i go ahead and just do a console.log of request.body so as to see what we are getting let's just refresh this hit login and in the console we see we get nothing because i think i did not really save it let's just refresh this one more time and we still did not see anything but we were submitting i think we have we are not really submitting anything as well so to do that we have to actually give the name as username and password right and now one more time if we try to log in what we are going to see is username as admin and password as admin which is perfect right so what we really want to do is we want to extract out username and password from our request.body right first of all i'm just going to say if request.body is not available then i'm just going to say rest dot status code is 404 and rest dot end error rate and return because we don't want any further processing otherwise we are you know inside this then what i want to do is i just want to say that a token in this case is going to be jwt that is the package which we are gonna import now so import jwt from json web token jwt dot sign and i'm gonna say username is whatever it is and i'm gonna say it is admin or not on the basis of username is in fact equal to admin and password is in fact equal to admin right we're just gonna just set the admit field to true if that is a fulfilled criteria otherwise not and for the key i'm just gonna go ahead and just you know be lazy about it and just write just smash my head on the keyboard so this way we are just creating a signed json token which we are returning using an api and [Music] yup if i refresh this you can see we get a nice little token for us which is which is a json web token and if i go ahead and copy this whole bad boy and go to jwt.io which can be used for decoding json web tokens which is basically a base64 only but you know it's still convenient so if i go ahead and paste it here you can see that this is the data which we have and in fact this is an admin because username and password were both admin but if we go ahead and try to log in with something else oops oh i think we made sure that this is always admin so this should be actually default value not value admin 123 and login and then if we go ahead and take a look at this what we're going to see is that this is admin false right and we cannot really change it on the client side because jwt tokens are secure so first things first let's just move from 1980s to 2020 so i'm gonna say that on click let's just make this a button first of all on click i'm going to say summit form and what this summit form is is that it's going to perform a request to our backend server so i'm going to say my response from the api is fetch api and what do we have login right i'm going to say method is post our body is json.stringify username password and again because we are in 2020 now let's just make use of the react state with us right so i'm going to say a similar thing for password set password and let's just import this bad boy and finally we can switch back to value one more time this is username and this says password nice and easy right one last thing which you want to do is say on change the event should set user name to e.target.value and a similar thing should happen for password as well that is set password awesome so now once we have the response from the server we want to convert it into json response because our server is also responding us inside json and then we can finally take out the token by saying rest.token because that is essentially what we get back from the server but an object which has a key which is the token for us right so i can just go ahead and say that if we have in fact a token what we what we can do is we can just go ahead and update the message message set message is used for you state a string which is uh empty message you are not logged in and i can just go ahead and say we have a message in terms of h1 at the top right and once we have set message with us what i can do is i can first of all go ahead and import jwt from json web token again because we can use a single package on server and client as well why shouldn't we so i'm going to say my json is json jwt my token right and i'm going to say json i'm going to just say welcome to json.username and you are and i'm gonna just say json.um let's see i think we need to wait for this oh not really this is synchronous as well but we can just um you know return it as a combination of object whose key is string and the value is also string so yeah actually let me just go ahead and remove this welcome json.username and you are and we're just gonna check json.admin is true an admin otherwise not an admin that's it right else set message something went wrong whatever all right so once we have that in place let's just go ahead and take a look at our home page now so we are we have a message you are not logged in let's just try admin admin as the combination we get welcome undefined and you are not an admin fair enough so let's first of all console.log our json what we are getting and let's just move to console lists oops console click on login and we get admin as false and that is the case i think yeah that is because we are not really setting the headers um to content type application json right here because we are transmitting json data right so we need to make sure the backend knows that now if i click on login yeah that's the right response now so we see welcome admin and you are an admin right however if i try to do something like username something login we get welcome username something and you are not an admin similarly if i have admin here but the password is incorrect we have welcome admin and you are not an admin but once we do admin admin we are an admin right so again very simple dumb example of jwt tokens with next.js api um just showing you a simple use case of that because you know you cannot really fake the integrity of jwt tokens unless you don't really have the key from the server and because the key is on the server you cannot change response now on the basis of this what you can do is for example you can have a secret dot ts key and what we can just do is say export default function right here i can say const token from request.body request is next api request request and response is next api response right and i can say you know just take out the admin field out of jwt dot verify import jwt from json web token i can say token and key right and we can just for the time being being lazy we can just import it like that and i can just say as an object which is having string as keys and string gas values right so i can just say or rather boolean as the value right in our case so i'm just going to say if admin is true rest.json secret admin code one two three four five right else rest.json admin false so once we have that in place what we can do is we can go ahead and on the client we can just implement um a secret like the following so again we can have a secret message set secret and we can just make sure this is empty at the moment and finally what we can do is if we have a token obviously we can say await again this whole thing actually so i'm just going to copy this but this time this should be secret we have a application json and now we are just passing in the token for the further request so this would be our token because we already have access to the token and then i can say if rest dot secret is available to us secret admin code actually i can just say set secret as rest dot secret admin code else said secret nothing available right and i can just say secret as secret all right so now if i go ahead and try to log in with admin admin hit login you're going to see we get welcome admin and you add an admin and i guess secret one two three four five but if i make a mistake you're gonna see that we do not have anything available as a secret so you can basically just go ahead and store this json token json web token and use it for further requests um you know a very popular approach for authentication stuff like that so yeah i mean that's that's pretty much it for this quick little demonstration hopefully this would be useful this is not really a nexus project we have next year's projects later on down the line if you're watching this course on code dam where we'll create e-commerce and you know all those blogs and fun stuff but yeah this is just a quick dirty implementation of something with nexus and next year's api routes so that you get a idea about how things are working and of course you might have seen that you know most of the thing is react only even with next year's plus the only added advantage uh the actual good advantage is that you know you get all these all this html right off the box from next year's framework so yeah that's pretty much it for this video i'm gonna see you pretty soon in the next one hey everyone welcome to a brand new section in next year's this is going to be a routing section in which we'll be seeing simple routing and complicated routing as well eventually as we go through and some of the new changes which next year's brings in to the framework so starting off this video would be on simple routing you can already see that i'm on local host port 3000 and if i switch to my text editor you're going to see that we do not have a lot of files just the index.tsx and the underscore app dsx file so this is how it looks like as of now let's just go ahead and remove a bunch of these things except for let's say a single link right so i'm gonna go ahead and remove all of this and i'm gonna remove the footer as well and i'm just gonna go ahead and change this indentation to tabs because that's what i use so here we are now we just have a single link with our on our website and that is also using you know just regular ah drift tags so first things first inside simple routing understand two things the first thing is that inside this pages folder right when you create any file that is a typescript or a javascript now if you're working in a typescript project that would end with a dot dsx or with a dot ds if it ends with dsx or dot ds and if it is a you know valid javascript file which is exporting a functional component next.js would automatically make it a page by that what i mean is that you can literally go ahead and write here mayhew.tsx and just export default a function which should be a react component should be a react component p-o-n-e-n-t compo c-o-m-p-o i'm pretty sure i spelled it wrong but anyway anyway let's just proceed so by what i mean that it should be a react component that means that it should return some jsx expression right not really expression but a jsx element so as to speak it could be just like you know hello or as simple as just a string as well but it should not be returned undefined right it could be returned null because null is a valid jsx element but it should not be returned undefined so as long as the default import in a file which is a valid typescript or javascript file depending on your project setup is returning a valid react component that is is returning a valid jsx element you have a page for yourself now once you have mehold.tsx what you're going to see is that now if you go ahead and visit localhost 3000 slash mayhood it's going to say hello right so i can just say hello from mehul right so that we are clear that we are on mehul so you can see that it dynamically automatically generated it right it won't be mayhew.ts6 it would mean nothing like that on any other page you're going to get a 404 it would be just me without any extension anything at all so this is how simple routing in inside of this next js works that is you just go ahead create a file export a function which returns a react component and that's it you're done now you can go ahead and visit the slash whatever it is and it will automatically be there next year's actually borrowed this concept from php so if you have been a php developer back in the days you know that php works just like this you just create a file and you can directly go ahead and visit that file and it will be just you know the output would be served just out of the box so this is how nextgs works but anyway nonetheless routing is more complicated in xjs than in php which has you know brings its own benefits so we're gonna take a look at that in the next video so that's all for this one i'm gonna see you in the next one hey everyone welcome back and in this video let's just take a look at the link component which you're gonna be using all the time on your website why that is important and how it works so we have just like you see we have an index page and we have a mayhew page right so you can see that if i go to localhost 3000 we're going to get something like this and if i go to close 3000 mayhew we get this content so far so good now obviously in every case you're gonna need some links on your website so that people can navigate around right on different pages now one option is to have these ahrefs links like this but the disadvantage to this and let me just go ahead and show you if i have a link something like you know uh major because that is that is where our page is located right so if i go to welcome to my blog if i do something like this go back and if i try to click on this pay close attention to what happens here you're gonna see that the page actually reloads right so you see that we have actually created a conventional website which is reloading when i click on a link right so it's fetching the document again from the server you know all that regular thing is happening but we can make use of the dynamic nature of react that is we can make use of the functionality that we do not have to fetch the whole html of the page by that what i mean is that internal routing could make sure that the experience of the user is very smooth between the pages in terms of page transitions so there's not a jump but in fact a smooth change of page which is which pretty much feels like native application so how do we do that well we cannot really do that with the regular anchor tag because nexus does not know about this any much but what we can make use of is something known as the link tag from next link right so you have to import it from next link and it's a default import as of now so what you've got what you have to do pretty much is just go ahead and wrap this a tag inside a link and give it an hrif of same as you have in the a tag and remove the href from the attack now why do you remove this because next year's would automatically pass down this href to this anchor tag and that is it you do not have to pass any other tag and we're going to discuss this again in the in the complicated routing and that is like the nested routing but and the dynamic routing but earlier you also had to pass in something known as as which was your real link but with nexus 9.5.3 onwards you don't even have to do that the href would work just fine without any changes at all so now if we take a look at the the blog again the website again just pay close attention to the state of the page so if i click on this you can see it instantaneously loads and it is not reloaded right so you can see if i go back with my browser window browser button i can just click and you know go back click go back click go back it's instantaneous it's fast right and that is made possible with all the optimizations next year springs in like you know preloading and stuff so we can cover preloading a little bit but yeah i would really want to have that in a separate video anyway so yeah that was a quick little introduction to link and how you can do simple routing with it we're going to make use of link again in complicated routing but that's all for this video i'm gonna see you in the next one hey everyone welcome back and in this video let's just take a look at nested routing which means that not only you can just send people on slash major but you can also send people on slash mayhew activities activities right so how do you do that well you see that um the basic instinct would be that if mahul.tsx gets us to mahul then you know maybe mayhew activities.tsx would get us there well it's partly right but the thing is instead of having a slash in the file name what we're going to do is we're going to create a folder named mehul right and i'm going to move this mayhew.tsx file inside this mayhole so now what's happening is that whenever i access slash mahul we would be inside this folder right and any file that is present inside this folder would act something like you know as the just like which is acting inside this pages folder by that what i mean is can you guess what's going to happen or maybe can you guess how i can access this major file on the browser well yeah i mean to access this first of all i have to get inside the folder which is you know this mayhew folder and then because this file itself is named mehul what i have to do is write mahul one more time now when i do that then i can only get access to you know this thing so i'm basically doing localhost 3000 slash to get to this particular file now how do i get it on just but with you know as the folder structure well i can just go ahead and rename that to index right and now if i go ahead and take a look and just go to slash mehul that is what you're going to get a default file just like earlier but inside a folder this time now what advantage does it give us over a single file the advantage now we have is that we can have nested routes right so now i can create activities.tsx i can just borrow this from here and i can say my whole activities and what i can go ahead and do is say that you know we have this as activities and i can go back on the home page and click on this and you can see that we are now inside the activities page right directly inside activities page which is you know just sitting with our index page as well so that's how nested routes would work and basically you can nest it to any depth which you want but for the most part you're not going to need more than maybe four or five levels of depth that's that's the max you're going to go for a medium to large size projects as well so yeah that's how nested routing would work there's also something known as dynamic routing which we're going to cover next because dynamic routing is more fun than nested routing because you get access to a number of routes without actually caring about them so that's all for this video i'm gonna see you pretty soon in the next one hey everyone welcome back and in this video we're gonna take a look at how we can create dynamic routes in next chase and how we can just go ahead and work with that so we have seen how to work with nested routes but what if you want to have a dynamic route for example let's say you have a blog on built on nexus which we're going to create later on so there's a dedicated section where we create an actual blog built with nexus so in cases like those you don't really know um the later on slug for the blog post right it could be anything so how do you deal with that well for that you have dynamic routes so let's just go ahead and let's just say i go ahead and delete this and i create a page called fruit right and right here what i want to do is in fact let me just go ahead and delete this as a folder or yeah let's just keep that so anyway because we'll need that will make things a little bit more clear so we have a fruit folder and now what i want is anyone who visits something like you know local host 3000 whatever then fruit then apple then this apple should be displayed on the screen or maybe we just want to do something with this apple but i don't really want to hard code all the fruits with all the files because that would be waste of resources right so to deal with that what we have to do is we have to create a special file in nextgs which starts with a bracket with a square bracket to be more precise right and ends with a square bracket so here i'm gonna write something like name dot tsx and this could be anything in between the brackets right it does not really matter what matters is that you create this file with the opening square bracket and a closing square bracket that is very very important and this should be just you know before the tsx you don't have to you know enclose the whole file name in square brackets just the uh the part of the file before the extension in square brackets so once you have that in place let's just go ahead and you know just go ahead and export a regular component nothing fancy here i'm just going to say h1 hello right but what's interesting about this is once you have this in place what this means literally is that go ahead on fruit that is fr uit and capture anything else you write and send it to this particular file right by that what i mean is that for example this url which you are seeing right now and this url you know which is anything random are going to point at this particular file only next yes is going to use the logic from this file for serving both of these rounds and in reality all of the routes like this what nextgs would not serve however is just the fruit route right so if you just go to the fruit route it's going to send in a 404 so if you want to make it serve that route as well you can just go ahead and create index.tsx file or you can maybe just try to catch all the routes which you're going to see in the next video but uh yeah for this video what we have in place is you you have a dynamic section of uh routing in place and mind you that this would work works this would also works but this right here abc section 1 and abc would not work why is that because you see now you have actually you have two segments not one and you're just listening for the one segment with the square brackets right so if you go ahead and take a look at abc and one two three here you're gonna see we get a 404 we get a 404 on this page again this is because two segments of url and would not work right so how would you make um you know how would you catch this thing well what you can do is instead of creating this as a file let me just go ahead and or maybe just keep it right like that let me just go ahead and create a folder which is name now now again just like i said this could be anything and inside this i create another thing which is something like sub name now what's going to happen is now we're going to start catching these guys right because now we have a dynamic segment we have first of all we have fruit then we have a part of dynamic segment then we have another part of dynamic segment which we can now catch so if i go ahead and refresh it now you're going to see we are able to catch it now but what this would have resulted in is that we would have lost the ability to catch the first dynamic segment now so anything on the first dynamic segment stops working so how do you make that work as well well all you have to do is just create an index.dsx file here because remember when you're accessing just this name segment what next is looking for is basically the index.dsx file either a name.tsx file which is not really there because now we have a folder or this index.tsx file which we looked in the last video as well how the routing really worked so once we have this index.tsx file you can see when i go to fruit name that's it just the namepad that is the first dynamic segment it's going to fall back to the index.dsx file so now if i go ahead and you know hello from first segment and if i go ahead and pick this first url hit it you're gonna see we get hello from first segment however if i pick this url with two segments we're gonna get just hello which is the message from our sub name component right now what's the essence of this name and sub name and why do we have named it like that well it does not really matter but the essence for the names is that you can use these properties you can use these names to extract out the route you are accessing that is these values jd sfh whatever that is section 1 abc so you can have name as section 1 in your code and sub name as abc in your code right we're going to take a look at how we can do that with the use router hook but that's that's the essence of the name that's why i wanted to tell you that so yeah i mean that's pretty much it for the dynamic part that's um as much you're going to need for the most part this is what you're going to need for dynamic things right because you won't be going a lot beyond this unless you have very special use cases this covers almost everything you're going to need with next js routing so that's all for this video i'm gonna see you pretty soon in the next one hey everyone welcome back and in this video let's just take a look at the use router hook which i was talking about in the last one and this hook is basically um you can think of something which you can use to programmatically control navigation and access these parameters stuff like that in next year's right so what you have to do is just go ahead and write const router is use router oops not use reducer but use router and i have no idea why the hell autocomplete doesn't work for next js modules but that's uh all we have and this is you're gonna import it like this right so once you have the router with you what's going to happen is that this router contains a bunch of useful things right so if you just go ahead and console.log this router object right here what you're going to see is that if i go to we are on the sub name right so if i go to the console now what's going to happen is that we get this object twice because you know it might have rendered twice that's why we have two console lock statements but that does not really matter a lot so you see that this is this is what this router object contains so it contains aspart which is our real path of the location we have the back which is which could be used to programmatically send the user back in history we also have base path you know some common things um we also have components which is not you know something which you should use directly but yeah it is there we have events we have the prefetch thing for pre-fetching the urls the interesting part is this thing we have the query object with us so you see next yes what's going to do it's going to split it's going to sort of explode your url your dynamic url on the basis of how and what were the dynamic paths so you see that we have a file structure of fruit then a folder named dynamically named name and then a dynamic file named sub name so next years what it did is broke the query that is broke our url into two parts the name is section one and some name is abc which it picked up from the url so if you go to abcd what's going to happen is you're going to get a similar thing in the query aim section one and some name is abcd now right so you can pretty much go ahead and write here anything and that is what going to what's going to happen so what you can do essentially is you can just go ahead and print out router.query.name and router.query dot sub name right here and see that these this sub name matches with this that is the file name and this name matches with this right so you can name them anything else you can name it even name it mehul then you're going to write router.query.mehul here instead of subname so once you do that you can see pretty much we start getting our messages here so i can say hello to name and i can get hello hello abcd and i can also name um you know hello there oops hello there there you are right so you see that then we get there later on so we have hello as the first and there as the next one so this is what the use router does right one thing which is very important for production level applications is that you use routers sometimes would not work as you would expect so you see that on its first render the query object is actually empty right the reason for that is that next js next js is going to make the query object empty if you do not have any prefetching conditions by prefetching conditions i mean that if you do not have any uh you know things like get server side props or get static props in place so we're gonna discuss about get static props and get server side props in the later section it is very important and very useful concept of next shares but let's not get ahead of ourselves um just just to know how you're gonna fix that is you're gonna know that in the get static props video but yeah this is something which is easily fixable so anyway that's how you're gonna make use of use router now i can just go ahead and you know just create a button here on click which takes take me home which is something like this right and what i want to do is when i fire this when i click on this button router should go to the home page right so now you have a couple of ways to do that firstly you have a push and then you have a replace now let's just go ahead home and take a look at what both of them does let's just go ahead and take a look at push i'm gonna give it just a slash because that's that's where we want to go right so router.push slash that's it so if i click on this you can see that we immediately go back to home now what push did is that it pushed the home on to the history of stack of history right by stack of history what i mean is that when i click on back button i'll go back to the page so if i click it again i'm on the home page i click back i'm back to that page what replace would do however is it would replace that particular page from the stack history altogether by that what i mean is that now when i go ahead and click on this and if i try to click back i would not go back on the same page now you might think i'm there but let's just try this with something like um you know let me just go ahead and open this in a new tab and now let me just go ahead and click this so i'm at the home page we are using replace and if i click on this back you see i came back to my new tab and not the previous page because that previous page was replaced in the history with the home page so this is the difference between the router dot um you know router dot push and router dot replace pages so yeah that's pretty much it for what you're gonna need for use router that's all you're gonna need for the most part the router.query and the dynamic pushing of the routes here and there on buttons i would say personally try to use link component as much as you can because it's good for seo it's good for accessibility and people can actually see that there they are about to click a link but for places like where you need programmatic navigation router is unbeatable so yeah that's pretty much it for this video i'm gonna see you pretty soon in the next one hey everyone welcome back and in this video let's just take a look at catch all routes in next year's now just like i told you how you can create you know just the name and sub name and all that thing you can have hello there just like that now how about you want to go three levels deep right so you can easily see that if you are doing it in the file structure it can get a little bit messy as you create more and more folders you know especially in cases when you don't know the depth of the link so in that case you can literally never guess how many folders you need here so for that case what you have is you have something known as catch all routes by that what i mean is let me just go ahead and delete this whole name folder right and just create a single file inside this fruit which is again starting and ending with a square bracket but this time it would be something like name but with three dots in front of it and if you observe it carefully it's sort of like how we um you know try to accept an number of arguments in a function as an array in javascript so if you have something like you know function sum and you do something like this console.log and if you just go ahead and call this as one two three four five what's going to happen is that it's going to console log this as something like this right so you have an array of values which were passed so anyway with this optional uh not really optional with this catch all route system what you can do is you can just say export default function [Music] um my fruit anything does not really matter a lot what we can do is we can just go ahead and first of all make use of router so that we can actually see the routes which we are talking about so import use router from next router and then finally we can go here and just return h1 hello but what we want is we want to console.log the router dot query right because this is where the magic would happen so once we have that in place let's just go back and try to refresh this page and you can see that we get hello even though we were three levels uh nested and in the console if we check the router.console you can see we got three values inside the name key now because name was our destructured uh you know how we destructure these values and we got hello there and dsfd whatever it was in the specific order of their occurrence right so the first one was hello the first element is hello and so on and so forth so i can go down and i can basically you know try one two three four five six seven eight nine ten and you're gonna see that you get pretty much the same thing all the way down right so you start with one and all the way to 10 in the specific order that is that is like important thing so yeah i mean this is how you're gonna catch all the routes in a particular directory or maybe you know if you're brave enough just place this inside your root directory the other thing is optionally catching all the routes by that what next js really means is that just like we saw that you know if you just go to slash fruit it's going to throw you 404 but in a lot of cases you might just want this file to cover this use case as well instead of like manually creating index.js and then having the same code in place for that as well so for those cases what you can do is you can go ahead and have another set of brackets just like that once you have that in place if you go ahead and refresh this you're gonna see that now next gs also catches the base of your um you know the base domain inside this particular file itself one very important thing to note here is that you can see this time the query object is empty it does not have the name key with an empty array the object itself is empty right so that is an important thing which you should remember when you are using optional catch all this might change this behavior might change in future but this is how it is right now so you can see now if you go to depth it starts working just like you're gonna expect it to so yeah i mean that's that's that's pretty much it so that's how you're gonna create dynamically dynamic routes with optional path length and uh be done with it and with just have a single file to handle it i mean it could be very useful for a lot of things right so yeah that's pretty much it for this video i'm gonna see you pretty soon in the next one hey everyone welcome back and in this video let's just take a quick look at a 404 page you can create in next year's now there's whole other domain for custom pages as well but 404 is the most common you know use case of error pages so right now you see that if i go to a domain or go to a path like this we get this page now obviously your business requirements might be different but to create a specific a different 404 page all you have to do is just go ahead and inside the directory create a 404.tsx file that is you know just 404. now remember this is this does not mean that you can create files for different status codes as well this 404.esx or 404.js whatever you are creating depending on your for project structure this file name is actually hard coded into next chase right so you just cannot create you know 405 and if there's a 405 from error from the so that would be so no that won't how it work so just go ahead and export default function uh my 404 and i'll just return h1 404 right simple as that now if i go ahead and refresh this you can see that now i get a different 404 that is something which i wrote simple as that you know just again yet another react component and yeah that's that's pretty much it for this video because i won't really bored you with something which is not really required so that's all for this video gonna see you in the next one hey everyone welcome back and in this video let's just finally start with one of the most important things in next year's that is the get static props function now what this function really is is to explain this i just have to go ahead and create let's say a file um i'm gonna say maybe dynamic dot dsx why not let's just go ahead and create a function which is just dynamic and return h1 dynam nothing dynamic about that as of now but what we're gonna do now is we're gonna export another function from this file which is not going to be a default export because obviously we did export a default function but that is going to be a get static props function so i'm going to say export const get static props now you can type this if you want get static props if you want that's that's where the type would shine and it would just correct us with the things and you're gonna have something known as the context for this function right being passed to you now you can clearly see it throws me a warning an error whatever it is that we need to return an object from this particular function right so let's just go ahead and do that exactly i'm going to return an object but it needs more than an object it needs a props property which should be an object so for now i'm just going to say my favorite number is 4 like that right i'm not making use of this context doing nothing at all what this does however is before your function is executed nextgs is going to execute this function right here in terms of server right so this function executes on server you can think on execution on server right and this function right here is executed obviously on client as well as on server but for the most part you can think of this that next yes it's going to execute this on server take whatever the return value is take the props from that return value thing and inject that object as props inside your component right so now if you try to say dynamic number is you know props dot my fave number what's going to happen really is because this object has been dynamically inserted into this page you're going to see a 4 here so now if i go back and go to dynamic hit enter you can see dynamic number is 4. if i go ahead and change this to 5 and refresh you're going to see we get a dynamic number five right and you can clearly see that if i go to the page source dynamic number and you can see that this is this thing is actually present in the source code itself you can see the fife is here right it's not injected on the client by some javascript magic it's actually rendered on the you know on the back end by nextgs and is sent to the client but but you can see clearly that next is actually in checks my favorite number as five prop as well in the page now why is that well one of the reasons you can think of is that suppose if you are coming to this page from another page then what nexus really do is that um you know it just instead of getting this whole html to to the client it will just get the updated props and the template for the page and would dynamically construct the page right because that is much cheaper than you know just completely navigating to a different page but for the most part what you have to remember is that you can see that the get static props is actually helping you to have dynamic content on your page now you might say that this is not really dynamic but what if i told you that you can actually require the file system here right which is unknown thing right so if i have something like um i don't know let's just say we have a public robots.txt file right i am a file something like that now if i go ahead and say my favorite number is fit fs dot read file sync that is synchronously read file and if i go back a directory into public robots.txt and i want to read it in utf mode and just do that what's going to happen if i refresh it now we get no file or folder because we might just need to have path here as well well things might get a little bit you know ugly for setting up the context but but dot join directory name i think it should not be directory name it should be process.cwd and once we do that what's going to happen is it's going to start from the root directory so we just need public and yeah things like that let me see what's really going wrong what we are missing path.join it's fine it's fine as well my favorite number is txt right so now you can directly see that i get imf file i can go ahead inside this i can edit add some more dots hit save refresh we get dynamic content again you might think that this is not truly dynamic and that's fine but what's fascinating about this is that just what i'm going to show you now with props it actually accepts a revalidate parameter as well that's it for this video in the next one we're going to see a revalidate parameter which is extremely useful in next year's and especially inside the get static props thing so that would be all i'm gonna see you pretty soon in the next one all right everyone now we're gonna take a look at the revalidate parameter in xjs and what this parameter is is that it allows you to do something amazing what happens when you use a page page like this what happens is that when you push it to production when you create the next shares build what's going to happen is that it's going to create a static it's going to create a static export of this particular page you know just like with the contents of this and be done with it right next year's now whenever you visit the slash dynamic it's just going to pick up that particular file which is that it has statically created from the file system and throw it on you it does not bother what's in that file nothing at all but when you specify a special parameter called revalidate and with let's say 10 what's going to happen is that things become interesting now in 10 seconds if there's a request to the server in every 10 seconds if there's a request to the server nextgs is going to try it's not saying that it would it's going to try to recreate this page based on updated data by that what i mean is that it's going to run the get static props function on the server for this page and try to update the the static file which it has for this particular page and this only works on production so i cannot really show you on the local host for the demo because revalidate is useless on the local host because you know get static props on localhost always runs right just for you know development reasons because it would be very hard if it's just running once so on production let's just take a look at this this website this nice little website you can see i can refresh this as many times as i want and these numbers right here are not changing right because if you take a look inside the source as well you can see 448 is actually a written number right here inside html and it is actually stored on the as on the server as a static html file but let me just go ahead on this github issue now and focus on the 448 you can see that i have already given it a thumbs up let me go ahead and remove this so it's 447 now if i try to refresh it you can see it's not updating it's very important you see that's this you can see that after some time it updates to match your number right and that is that is great because the guy who has actually created this page the repo when it was built next you do not have to redeploy it to update this number that is you do not have to recreate the whole static all the static files next js already did that on the basis of this revalidate parameter so this is what the revalidate parameter usually would do that is it would help you to refresh the pages um which you think might change but not as frequent right the best example for this could be blog post so you might want to throw in a revalidate there but maybe of 60 minutes or two or three hours right because once you have the static built of the blog post it might probably won't really change especially if the blog is very old so yeah that's how the revalidate parameter works in a nutshell um and that's how it works really so that would be all for this video i'm gonna see you pretty soon in the next one hey everyone welcome back and in this video let's just take a look at another function which is very important which works very closely with get static props and that is get static paths now let's just go ahead inside this fruit and let me just go ahead and name it very simply just name and let me just go ahead and paste it right here um let's just get rid of this and let's just make this math.random why not right we have the props and we have let's say oops we have let's say hello props dot my favorite number nothing fancy the most boring application on the planet right now but what we are gonna learn about is not very boring because we're going to export another function from this file that would be named get static paths and we can type it with get static paths right here right which is going to help us with some of the types so it returns an async function one more time and you can directly see it's complaining us with you know a return type of something like this so what do we really have to return from this function is an object first things first this object should have paths within itself firstly so we have a parts which is an array we're going to see what should go inside this array and then another another property a second property which is a fallback right so i'm going to specify the fallback to false first of all now there are a couple of things which we need to do first of all in this in this uh before we actually learn get static paths the first thing is that whenever you implement get static props inside a dynamic file that is you know a file with the square brackets around it you have to implement this function anyway get static parts right get static props would work fine on its own only inside a page like this which is a standalone page right dynamic.esx is a standalone page if you have a dynamic page you have to get you have to use get static parts and it will make sense why you need that you need this function because this function specifies when the static props should run right now first things first get static props runs at build time right it does not does not run at run by that what i mean is when you're gonna push this application to production before anyone sees your application live getstatic props would be run for all the pages and you know all the html files would be computed all the json files would be computed and they would be stored on the file system that is why it works perfectly fine for you know static files like this you know with with no square brackets with them but with files like these they have a problem because static props runs at build time you cannot create infinite number of files obviously right so the second solution is to specify to get static props that is is to specify to next js on which files you want to run this static props on right i hope this makes sense so far so how do you do that well get static parts exactly does that and it takes two values for this we're going to ignore the fallback false for now just bear with me um this parts thing what this is is it contains the information um on which particular routes you should run the static props on so what do i mean by that i'm gonna say patterns is an object right which contains in our case it will just contain name because name is the dynamic part and i say that name is hello firstly another object is name is world and not really like this inside a different object itself right so you can clearly see what's happening here let me just go ahead and see if i can make some space i don't really think i can but anyway you can clearly see what's happening here i have an object params with a name of hello another object with the name of world and i have a fallback of false this is important to remember but you can forget about this for now so what would happen is that when you push it on production nexus is gonna visit these two particular urls it's going to it's going to say let me just go ahead and fetch localhost 3000 fruit hello take the output store it on the disk and i'm going to go ahead and take the output world and store it on the disk and done that's it case closed start and done any other route any other route which is here it's a it is going to be discarded as 404 let's see so now if i go to fruit and hello you can see it works fine if i go to world you can see it works fine but if i go to one you can see we get our 404 which is the ugliest 404 ever but we can just delete it and if i refresh this you see we get 404 on a page which was supposed to be dynamic right so how does how why did that happen let me just go you go through over this thing one more time why did that happen you can see that we are very well inside the dynamics segment itself our page file name is also dynamic so this should technically render this but it did not do that because we have a get static paths get static paths when has a fallback of false defines that this paths array would be the only thing that would be permissible so as to speak so if i go ahead and replace this hello with one now if i go ahead and try to visit this url what you're gonna see is this works now right because i just added it to be permissible but you're gonna ask me that hey miho doesn't that really defeat the whole purpose of the dynamic thing well i mean it might for you but for some cases this is this is better right for example again here you can access access all the node stuff that is you can make db calls you can access file system you can do whatever you want to do and finally you can create this object on the build time to have a number of parameters have a number of things and they would all be fetched and dynamically their static equivalence would be created right but what i did not really tell you about is the fallback option as true by fall back true what's going to happen is that this thing is still going to happen you know when you are building build start when the bill starts next chase is going to visit this hello right here next chest is going to visit this world right here but it will not be done right what's going to happen instead is that if you have a fallback of true here it is still open to to any other url as well right it is still open to any other url but it would not statically create the html content of it on the build time right so if you go ahead and visit this later on what's going to happen is that it's going to try to run this on the server now this is happening on the server now right this is not happening as static nothing is nothing happening on the static part this would run on the server that is inside the get static props it would fire this function for this particular slug or whatever you want to call you can see in the context you can see that we have the params property which is containing the you know this particular thing so you can have context.params.name in our case and this would be name for us so you can fetch make a db call whatever it is and if the result is present you can return a valid object next chase wouldn't then use that get static props just like it has before to inject it and show the page so in this case it would be called the get static props on servo um you know render the page and then in background next js would add this to the paths list and would store it locally on the file system for faster access right by that what we mean is the next time the next time you visit this url right here the next time you visit this url right here what's going to happen is directly send the output from file because we have already done all of this and we have stored it on the file system for faster access only this particular specific page if you change another page if you change it to another page hold this whole of this thing repeats again right so yeah i mean that is how git static parts in next chase work that is how the paths property work that's how the fallback works one last thing if you have the fallback as true what's going to happen is that next gs is not going to wait for this get static props to finish by that what i mean is if you are visiting this for the first time what's going to happen is next gs is immediately going to serve you this page with the props being empty right and it's going to you know just just fill this props object later on so how would you know that it is waiting for get static props to run on the server well you have to first of all import the router like this you have to say something like if router dot is fallback that is it is loading on the server you can just return h1 loading something like this right and be done with it so now if i go ahead and visit a page something like hellofroot1 you can see i get loading for a bunch of seconds for this page url as well for this page url as well for a bunch of second and then once the props are injected you know the props is available to us this is fallback property becomes false automatically next year's handles that for us and we render our actual component now when you are on production the first time you would visit this url you're gonna see loading and then hello but the subsequent refreshes you're gonna directly see hello right because next.js now has the output from the file system itself so you do not have to wait or you do not have to see loading again but in development you're gonna see loading every time because just like i said in development next years for development purposes would fire get static props every single time right so that means that it would also become true every single time and you're gonna see loading every single time but don't worry about that in production you're just gonna see it for the first time and on the subsequent dynamic builds of this url you're just gonna see the page directly so yeah i mean that's pretty much it for get static parts that's all you really need to know about this know about this that the first thing is it is absolutely necessary when you're using dynamic routes the second thing is about the fallback property what false means what true means false really restricts your domain of this thing and true means that anything is allowed but that would have to go through to get static props and yeah i mean in case of false nexus would pre-render all these routes and you can not get its fallback for the pre-rendered routes but for anything else it's going to uh you know just send it to the get static props and wait for it and if it is false that is the fallback is false that just means that you are fixed with the number of routes which you have here and this is fall back never run anyway for any route because if it is not present here then you're going to get a 404. so yeah whoo that's basically all you need to know about get static paths get static props and dynamic files there's one more thing which is left that is the get server side props which is essentially having your own server call on every route and is usually said to be you know something of a not really a bad practice but something which you should avoid if you could avoid so yeah that's pretty much it for this video i'm gonna see you in the next one hey everyone welcome back and in this video what we're gonna take a look at is the get server side props now there's another function which is known as get server side props let me just go ahead back go back to the dynamic thing and i'm going to export const get server side props and get server side props is the type for this and again we have the context with us which you can monitor for more values right you can see we have a actually interesting things this time with this but anyway what we have here is that again we have to return the actual drops right and you could have pretty much my favorite number again as math.random it does not really matter the thing which matters is that get server-side props is going to run always right which is why it is usually um you know just said that if you can go ahead and make your code not use server side props that is better the reason for this is that get server side props is called always on every page request even on production right so just like we saw that nextgs could actually create static bundles out of these files stacktech html pages that is not going to be possible when you're using get server side props on on a single page right so if you're using git server side props on this page next js is not going to create a static um dynamic.html file on its file system to serve it faster because you never know what you might return inside the props that is the whole purpose of get server side props it adds a layer of dynamic rendering on the on the react framework to be honest this is what we wanted this is what we always wanted with next years right that it allows you to render server-side javascript dynamically this is the essence of server-side javascript right but when we have finally discovered it i'm discouraging you to use it why is that because when you use get server side props you're calling a node server on every request that means you get no caching benefits that means your request would be slower to the clients because it has to uh you know go all the way back to your server to be executed so this is pretty much in cases where um you absolutely cannot afford to have even the slightest delay like you know instead in um inside of get static props static props we can have a revalidate parameter here right revalidate one which is going to have some sort of static data but within a certain time frame it's going to update that but with get server side props we do not have anything like that so this is very much useful in case you want to create a real-time dashboard or stuff like that where latency would be absolutely disaster on page updates or page refreshes something like that so yeah i mean that is pretty much the whole purpose of get server side props i would say to almost always never use it unless you absolutely need it because you lose a lot of static optimization benefits when you use that so yeah it exists as a tool as a thing if you need it that is great but try to avoid this in your application logic try to figure out the logic where you can use this where you can avoid using this get static props is the best you know and you can even use it as a dynamic thing now with the revalidate parameters so that's awesome but yeah so that's pretty much it for this video i'm gonna see you pretty soon in the next one

Channel: Mehul - Codedamn

Views: 102,145

Keywords:

Id: tt3PUvhOVzo

Length: 147min 1sec (8821 seconds)

Published: Fri Aug 21 2020