Next.js For React Developers | Everything You Need To Know

so if you're getting started with next.js and you're struggling to learn all the fundamentals and the prior stuff that you have already actually learned with something like the queer react application or the csr regular classic react well in this particular video we will go through the steps into like choosing or particularly moving from a react application aspect of all the fundamentals that reacts provides the csr and rendering and fetching data and doing props and all that sort of stuff into moving into how nextgs works and using server-side rendering plus static sign generation so we'll be going through two applications that are theoretically the same thing but they are built on different stuff one is built on the actual next js application and the other one is built on the classic csr application or the react application using the korea reacts up so excuse me here they are pretty identical and this one's gonna like use some apis to access the api it's gonna fetch the dns enable you to share it's gonna allow you to basically upload different stuff in here and they are basically the same thing as said before so you're going to be upvoting and doing all that sort of stuff and we go through the projects of what are the fundamentals for you as you're familiar with regular classic reacts what do you need to know in order to move and be able to learn next years and what are the quick stuff that you should actually go ahead and grasp on in order to do that migration so how next js actually works compared to the regular class query x we all know and we all love and what are the main differences that you should have a bullet point and you should focus on in order to learn and actually get the most out of next years in your applications so in this particular figma file in here i got like a pretty simple and super super duper simplified architecture of how nexus actually works compared to the actual react how it works so as we all know maybe you've stumbled upon maybe you have not or not yet exactly so you know these kind of keywords you know the csr and the ssr versus ssg you probably already have heard about this if you want to like for example uh the landing page in here you can like read more about like ssr and ssg and all the sort of stuff and maybe sometimes it becomes a little bit kind of like you know ugly to understand all of those so try to understand this if you go to the fundamental and the pretty basic one which we all know we all love which is the regular reacts from this particular side so for example take a look on csr csr actually stands for client-side rendering and what do you mean by client-side rendering so you can imagine this particular scenario in here so you got your server which is you know your particular server in here which hosts your actual application so you can imagine this server actually hosts a query type application and it holds the bundled files so it will be hosting something like the webpack bundled files the javascript files the images and and some html files you've got and that's it and that's basically what react is all about and mostly it's going to bundle and it's going to store the actual javascript files which are super huge they include something like webpack they include something like your application code and you like your dependencies polyfills in here exclusive like it has big dependencies okay so the server has those and as soon as a user joins and tries to access your web page tries to request your website it goes to like www.uh.code1.com something like this and it does a request so it does an initial page request or a single page application request whatever you want to call it so the server is going to respond with the gs files they are still bundled the server is just going to send you those js files if things are basically the service in this particular criteria it thinks those files are like static files so it's going to send to the html and the javascript files and that is it and as i said before they are big bundles they are a couple hundred kilobytes to more than one megabytes in some cases yes because of the dependencies because everything is you know bundled together like the react dependencies react dom maybe using something like framer motion maybe something using like material eyes bundled as well anything you're going to be using any dependency of your application is going to be bundled and put in that bundle okay pretty cool now as soon as the user requests that it's gonna like it's gonna return this bundle into the actual browser okay now the browser you can like when the browser actually receives the javascript in the html he can just like go ahead and render that it needs to go interpret of course because it uses interpreter and it needs to go through that javascript file and the javascript code and everything to read through and render the actual web page so it needs a little bit more time to do this and especially if you got a really huge application it's going to need a lot more time so he's going to need to do that it's going to execute the code yes this is going to take a decent amount of time and eventually he's going to like oh that's it we render the actual web page and the user can have the first interaction as you can see it goes through a lot of stumbles a lot of like hot points in here in order to actually reach the first interaction of the user which might cause some delay and a really really bad user experience in the other hand if you move into ssr and ssg both of these are like rendered in the server but they just differ in a teeny tiny small change so for example for ssr it stands for server-side rendering and it gets you the rendered data on every single page request while on ssg it stands for static side generation which basically it generates static files or static pages on build time and only on build time it it's not gonna like regenerate the file every single request or something once on build time you generate something and it's gonna be like there forever unless you do another build and you update that particular files okay so let's go through what is the architecture behind both of these so we go on the server in here as we did before it's just a pretty simple server and this is a next gs server okay it's a next year's server-side rendering and this is this is basically what it's going to do so the server in here when when a user comes through and it does an initial page request for example it goes to like forward slash upvotes or any any page you we want or any routes it goes into so as soon as you request that the server is going to say oh i'm using xjs okay and um yes since i'm using xjs and for example i'm using ssr so on every single page request i need to go through the files the bundles the javascript code my code everything and they need to render them on the server so they're not going to send the bundles as they are but it will try to actually render the files on the server so the user won't know those bundle files he won't get the bundles files but he will actually get the actual bundles or the ready-made rendered files so you can imagine this we got the big bundle now job or the server side in here next year's tries to actually go ahead and interpret that and render it on the server that's why it's called server side rendering so it's going to do like oh it's going to split them into teeny tiny small javascript files and mostly they're going to be html files because it's going to render everything to html it's going to convert react into html which the browser can actually read in a super super fast way so the user can have a really good experience because the interaction now is actually a lot simpler and the browser doesn't need to go ahead and interpret that and render it where the user needs to wait a couple of more seconds nothing like that everything is server side rendered and of course you're gonna say oh so this depends now on the server yes most of the time the servers are pretty pretty powerful but this is actually a good sign because if you have a good powerful server it's gonna serve all the users that require that all right now it's actually the time to go ahead and set up a next gs application and actually just use some sort of cli that fgs provides us with to fundamentally can just go ahead and create and scaffold the new projects so if you're familiar with the queer react up or the cri cli well you can easily go and use nexus because they basically use the same notion and super super simplified so if you're like the cri in here the query has top you do npx query x type and you give it your application you can use typescript and so on and so forth now for this one it's a lot simpler to be honest so you do mpx you do create x next up and you give you the name in here and of course you can use couple of options maybe you want to use npm maybe you need a specific example in here maybe like you want to do next gs and source stuff you can easy to do with that as well so to initialize this you can do mpx create next up and you can provide something like dash type scripts for using typescript in this project and you can give it a name in here like my next.js app or something once you click enter everything is going to be installed it's going to resolve the dependencies and it's creating it actually installing those particular dependencies and most of the time you all you're going to need actually this next.js dependency which going to do everything for you behind the scenes from building to development server and everything you actually need so if you head over to your projects and you're going to find a couple of different stuff compared or versus the regular query reactor projects so you're going to find something like pages i created this components folder in here so it's not a big of a deal i'm going to find some like public which exists in there as well which does the same thing but basically i'm going to find styles in here which are you know css modules you can go and export and import and you're going to find like a next.config.js if you open up this you're going to find some simple configuration provided from next and this one particularly going to allow you to configure next of how next can interact with react the rendering parts for example in this particular case and it's enabling the strict mouse so it's going oh react strict mode please go and enable that and it's going to enable this as well because we don't have access to the interlining rendering methods of react and everything everything is encapsulated everything is hidden behind the scenes and she's going to give us this really awesome configuration to work with which is so so awesome and it's going to give you a standard platform or standard interface to work across the board so i absolutely love this and the last thing in here if you jump to package.json you're going to find different scripts like for example the devin here is going to start a development server which is so so fast like blazingly fast uh you're going to find a build in here you're going to build a production one you're going to find start script and so on and so forth so let's go ahead and simply just going to start a development server you're going to do yarndev and as soon as that's here you see started server and it's going to compile it in just a couple of milliseconds and that's it so we've got two applications in here or basically two projects one using the regular csr create react top and everything which is pretty simple and everything and of course it uses typescript the second one which we've just set up is basically the next gs1 and this particular two projects are completely the same if we jump into the google chrome in here you're gonna find our application so this is what the application is qc uh one is actually running import 2001 which is the react application the csr1 and the next js1 which is running on port 3000. so both of these are identical before i've built them the same way so you can just go in and see what is like exactly different on the implementation side so they are just like a vote me application they allow you to share different comments and everything so if you head over to for example the access in here you're gonna find like an input in here which is the same thing in here as well that's gonna allow you to add comments so you can just go ahead and do like um i wanna um be i don't know a hero or something like this and if you enter in that's gonna like save this it's going to add this comment and you can go and upload this which basically works the same way on both of these and they share the same api so i'm using mock api here to month everything so you're going to see me using this api endpoint a lot and to access for example the users the comments of the users the about page and everything so i've tried to put both of the projects side by side in here from the actual right side we got the regular react and from the left side we got next js so we'll try to go through both of them and their differences so for example to start with in here is actually the folder structure or the project structure on the sliding here of the react it's actually optionated so you can go through any folder structure you like for example what i loved in here i tried to mimic the same folder structure of is but in here you can actually use whatever because you actually control everything if you go to the index.typescript in here you're going to find oh you are actually controlling the rendering how to render it where to render it and all the sort of stuff so everything is controlled by you and you don't actually need everything from that particular sign of course you are also controlling the index.html you can add whatever you want you can add hidden masks in here uh you can add links and you can add different stuff like the head the body and you can change it however you want but in the other side in here if you go to like the folder structure which that means you can have any folder structure that you would like to and you can have like components you can rename this you can rename the pages in here you can do something else and you can point different stuff in yeah but in the other hand here if you jump onto the next gss sign you can't have the same or like you can't have an optionated folder structure of your own you have to stick what is actually provided for you from the next js site and it's actually a standard folder structure or a standard project structure so the pages should be included inside of the pages folder you need to have the components in here are optional but you need still have some same particular structure for example if you go to the index in here or for example if i try to head over into something like a web page in here as curiously since we don't have an html file so if we go to the html file here excuse me we got the html file here we can have the head and everything but since on sgs you don't have an actual html file everything is handled internally by next js so that means oh how am i supposed to access that particular html file luckily for us next years actually provides those helpful functions or helpful components that allows you to edit that for example you can use the head component to actually edit the hand in here and you can change the title of the web page you can do stuff like that of course there are packages that on react allows you to then say to do that same thing in here but this is actually as i said before it's optional on react you can do whatever you want but next year's is more of like a framework and it's kind of like lock you down on a specific set of standards that you need to use you know in order to be able to actually use that in sds properly the other very crucial part which is routing so for example on the regular reaction here routing needs to be set up by you manually so what i mean by this you need to go and install a package like react dom or something or react route or dom and you need to give like the routes and you can have to specify specific routes in here and you give them the paths and you give them different stuff in here so it's actually optional again so react is like an open library and you can do whatever you want you can use a different library to do routing and yeti area but when it comes to next js it's actually more of a standardized and you need to use it in a particular way so if you head to the pages file or the pages folder set before and the pages folder is where your browser is going to exist so anything you put in here anything any name particularly the name of the folder or the name of the file is going to make a lot of sense on the route itself so for example here you got the upvote the name of the folder is actually upvote so we're going to have a route added for us called forward slash upvote the same way we do it in here forward slash of vote it's going to be the same thing in here but we added a folder you can have an index.js in here to tell it oh this is the the entry points or the main file for it or the main component for writes whatever you can add different stuff as well but this is actually actually going to act the path for this for example you have a path for api you can do that as well a path for about a bonus page so forward slash about page is going to be the same and the index.typescript in here is going to act as a home page so it's going to be acting as the same thing in here as the forward slash is going to be the same one right over there for the index or typescript so as you're clearly seeing here reacts and exercise are different a little bit on the routine slide so you need to go through the documentation of nexus in order to understand how that routine works you can do different stuff you can do dynamic routing like for slash id and how to use those particular parameters any area and they are all standardized inside of this particular folder with a particular structure that you need to follow but of course on the react side in here you can follow whatever you want you can put it inside a pages folder you can change that folder and yet yeah now let's see the most crucial part about the difference of next js versus regular reacts application and what makes nextgs special is the server-side rendering and how it actually works so let's go and try to see how the application works particularly this common stuff in here which as i said before you can comment something here you can upload it and of course it can be sorted out and everything so you can go and see how that works so if you go to the mock api i can go ahead and refresh that particularly to see how many comments i've got so i've got only a single comment right now so i can go and generate dummy comments i don't care about that i can go back in here and see how that works so as soon as they refresh the comments are going to be fetched from the server on both of these applications but they're going to be fetched differently so depending on how the application works because this uses server side rendering so this will be fetch on the server not rather not on the actual um like application in here but in the other hand in here for the react application or the browser side in here it's going to be fetched on the browser but not on the server because it's it doesn't know the server it doesn't use ssr okay so if i go ahead and like refresh that i'm going to see everything in here and everything's going to be coming from the server as clearly they are like dummy and they have been you know initialized and everything exclusively sorted out by voting everything you're going to find the same thing in here if i give it a refresh but this one exclusively took a couple of seconds before it fetches because it actually didn't finish down the server fetch it on the client so it shows the ui first then it goes and says oh i'm loading something or anything it does the request to the actual server and it grabs that particular json data awesome and the other side in here we also got something like oh we can add something by ourselves in here so let me just go ahead and clear out something in here i can clear it to four comments because that looks a little bit too much for me so if i go back in here um this is another comment or something i can go and add this of course this gets at last in here and you can do it here and everything whenever you click on that are gonna be sent to the server and going to be received and everything so we got the same behavior on this so you can go in and add a comments and it's going to be showing up right over there all right so it's going to jump to see how both of these are going to be working on the other side so if you go to the upvote section this is actually the upvotes files qcs we are audience it's actually the upvote components so let's go and see first how react does it which we are all familiar with of how react fetches stuff and how he uses the user fast and everything so i actually just go in and do like a fetch commons function in here or a method that goes ahead and actually uses the fetch method to go to the url and it does the fetching of the dna uses a get request or whatever then it does some pre-processing to it to just you know change the objects and make sure we get the right user for the particular comma to display that and the area so just doing some pre-processing and last but not least we're doing set comments and we are sending the comments on the states nothing different from the actual or what we are usually supposed to do with regular reacts of course so if you jump to the other side we during use effects so what we mean by usefx is actually whenever the component is mounted and is actually ready to do that you can go and fetch the comments update the states and of course you can go and pass those comments in the comment list to render them eventually that's simply what it is that's how react works if you jump into the second side of next gs of how it works if you go to for example up votes as you see this is what the upvote looks like it's pretty pretty simple but the logic and the main part of how netjs works is actually this particular method or this particular function it's called the git server side props and from its name in here you can know oh we are using ssr not ssg because it's getting server-side props on every single request so what this one does it's basically doing the same thing as the fetching in here but it's actually doing it on the server instead of the components itself or instead of the browser itself so here on every single request the server is going to prepare something it's going to go ahead and do oh this particular fetch is going to go to the api fetch the data it's going to do the preprocessing for you it's not going to update the states rather what it does this get server side props from its name is going to get you the props that are going to be passed through to this particular component as this component actually accepts or it's actually expecting a data prop in here and this data prop is going to be passed through from this particular function that whatever we're actually going to tell it to pass is going to be passed through so for example we got props you're going to have data and this is what's going to be passed through so eventually the components once it's rendered and once you've finished the actual server side rendering for every single request of course it's going to have this dna with a preprocess like data in here function is going to grab it from the api and everything and eventually it's going to be passing it through the components so if you might say oh what is the main difference and why you bother doing this way why we can do it this way of course the main difference is server side rendering and this actually is going to allow you to boost your application performance to 10x compared to the regular reacts application because it's going to be rendered and prepared and the data is going to be fetched by the server the user won't have to wait much compared to how it does before because it's going to fetch all the data and once it does fetch all the data sorry once it does fetch all the particular data in here it's going to grab the react application and it's going to convert this react application alongside the dna effect from the server into an html so everything is going to be rendered on the server and only the html files are going to be sent down to the browser and if you're wondering what is the other difference between react and xjs so if you jump for example to the upvote button in here which is pretty simple and pretty straightforward once you click it it's going to send a new upload it's going to like you know increment that by one and it's going to save it on the actual api so once you click on that exclusion here it's going to go ahead and simply just go in and update that and actually save stabilize the api both of these in here are going to be working the same way which you know you're going to be changing that and you're going to have the same behavior of changing the upvotes so let's go ahead and see the underlining behavior on the code does it actually matter or is it difference between react and xgs so you can listen here from the actual slide of react of how react actually works if we jump to that exclusively we got an upvote function this is actually the function that is responsible for our voting uses some url in here it does puts it actually puts the body data in here which is just doing an up voting and you have the indiana of course it uses some state to tell you oh the number of votes that are currently right now and is a voting or set it up voting just to know if it's loaded or not okay pretty simple and pretty pretty easy straight through so here are exclusive once we get a new votes we're going to just like update the station here to set a new votes so the actual state can update and we can all see the new changes for that how it works of course we're just simply passing that to the actual button so if we go to the bottom here we've gone on click only passing in upvotes and that's simply what we're doing in here and we're passing it loading and everything it's just regular reacts okay let's jump to next.js in here and see how it works we got the same method we got the upvote method we're doing the same thing in here we're doing or changing the state to know if it's loading or not we're sending the new data excuse in here but the only difference excuse in here we are not actually updating the state after receiving the new stuff so if we jump back in here that's what we're doing we're doing set values and we are updating the state and here we are not updating the stage because we are not caching the stage rather what we are doing we are actually doing it or re-rendering the actual page to get the fresh new data which is a pretty pretty well made up method that's going to save you tons of state updates tons of interactions it's going to save you a lot a lot of time so the refresh data in here if you jump to it it's actually just a function that calls the router.please and the router door place in here what it does is going to just like replace the currents um url with the current 310 itself so it's going to refresh the current page but you're not going to see an actual hard refresh for the browser it's just going to do an xjs refresh which means it's going to do another server-side rendering with the new data so you're going to do oh scroll false do not scroll to the top of page whatever and to see the actual difference between server side rendering and static site rendering for example we've got this about page in here which is all it is just like saying about it has a couple of texts and of course it uses or basically fetching that particular text from the mock api so this is not like a complete static thing it's more of like a dynamic data but it's actually using static site generation so it fetches that only once during the build time okay so if we jump back to our more projects in here we got for example the upvote which uses the get service high props and as i said before this particular function gets called every single time the user requests that particular one so if the user requests the forward slash upvote 10 times this particular function is going to fetch the data and it's going to be called 10 times as well so on every single quest it's going to be cold it's going to be fetching the dna is going to be passing the new props and so on and so forth so that's why server side rendering is used with dynamic dna that needs extra or these like consistent fetching of that particular data from a particular database or api so on every single request it gets updated to the new data if you go to the above page in here it does the same thing actually it's actually using api but instead of get server side props it uses git static props and the git starter products on nexus is responsible for static side generation so whenever this particular function is actually companion with a particular kind of like an above page or any other com like components what is going to happen behind the scenes is going to like every single time it's going to do a request is going to use the cached one because this one it will be called only on build time not on every single request only on build time and what i mean by build time is actually when you take your application and run the yarn build or the next build command it's going to build you a chunk which i already did run in here by the way so all i did is go ahead and do like yarn build which did run basically the next build command excuse in here and he created the actual bundles he actually generated the pages it generated the bundles it does server-side it did um static sign generation and all that sort of stuff and he puts inside of that particular folder which is the eventual folder is going to need to go ahead and publish into your server for server-side rendering and of course i just started a simple server that basically go ahead and serves the actual files from the dot next in here which we already built okay so this particular get static prompts in here only got called ones during the build time so if i go back into this if you try to see that in action in here i see if you say oh we got server side renders at runtime users get initial props so we got one single one and automatically generated a static html plus json which uses git static props which we did in here as well because that's what we were using as you see it's actually doing this this is a lambda this is just telling you oh both of these routing here the outfits are dynamic and they are using server side but the one with the dots in here is tells you oh this is actually a static page or a static actual route that we did set exact generation for it and we generated the html and json we saved it in here so you don't have to worry about it later on and if you try to see that in action and forward slash to up about if you go to our server in here and if you go to the request it does accuracy it goes to doing a request to force about and the actual what are you actually going to return it's going to return an index.html it's not going to return index. like javascript it's not going to fetch the data anyway even though we go ahead and change the data on the api for example if you can imagine this if you go to the mock api go to the about go to edit and not actually edit sorry if you go to the actual data routing here and try to change something for example i want to completely get rid of this particular paragraph is like say is deleted or something and maybe uh you know delete both of these or something i delete two paragraphs which are those two first paragraphs so go ahead and update that real quick we got the up bars in here to be updated excuse see everything is deleted on the database now if i go back remember this is not like running the dev server this is rather running the build production server and like the next year's production server thing okay so if i go and refresh that we should see the new data right not really we still see the old data because that was built during the build time and we already did the build and everything is saved on our folder for the build and it's not going to do any api requests to see the new data because it uses static site generation but if this was using actually a server-side generation it would have actually just gone to the server and actually pointed to the api grabbed the new data or featured the new data and actually updated that on every single page request but rather it's not doing it on the clients but it's actually more of doing it on the server and actually just handing us the html files so thanks for watching i really hope you guys enjoyed this particular quick comparison between nexus and react.js or the regular react.js and what are the main differences and what you should keep an eye on when actually trying to migrate or trying to learn next gs and move it from the raw girl react application of how it works and everything into an sgs so thank you guys for watching catch you hopefully in the next ones [Music] [Music] foreign

Channel: CoderOne

Views: 52,247

Keywords: React, react, react.js, Next.js, next, next.js, next js, react js, react next, react nextjs, nextjs react, nextjs ssr, ssr, react ssr, react ssg, react csr, next csr, next ssg, next for react devs, learn nextjs, beginner nextjs, nextjs router, next js ssr, next js production, next js fetch data, next js API, next js static site, next js dynamic site, learn nextjs for react, nextjs react 18, next v12

Id: omV9GEpQUGk

Length: 28min 57sec (1737 seconds)

Published: Sun Apr 17 2022