5 Reasons I Use Next.js Over Plain React

hey there chris sev from better dev here today i want to talk about my five favorite reasons that i love next js and this is also going to be the same video as five reasons why i think i'm going to use next.js for all of my production level projects over plane react.js now i was not on board with nexus when it first came out i'm not the biggest fan of jumping into a framework right out of the gate i kind of like to let itself grow and prove itself over time and as we see with next js is it has some staying power it's been around a little bit and it just got some funding and a lot of funding so i really like the trajectory that next js is going so i have no problem saying nextgs i'm going to use it for my next production level application instead of just plain old react so to start us off i went into my terminal here and i actually started a new project with npx create next app and i just called it five next things so create next app is very similar to create react app except it gives us the foundation for a next application so let's get into my five reasons number one i really like the out of the box routing that next.js gives us and this is page level writing file system routing and if i go into my settings here for my pages you can see that we start out with an app.js and an index.js so app is kind of an overall layout which is awesome feature on its own and index.js is going to be our home page so if i let's hide some things here i'm going to hide the status bar i'm going to close that out i don't need this page anymore i'm going to go into my terminal npm run dev and this is the development command that we're going to run to build out next applications and look how fast that was pretty quick let me open up localhost 3000 now so let's open that up in our browser let's go take a look at what nextgs gives us this is the default next js application so when i talk about page level routing or file system routing one of the cool things about this is if i go into my pages and i go new file about.js and i'm going to let me zoom out here i'm going to export default function about return div about page so this is our about page component and notice you don't have to import react since uh up here you don't have to do the imr import react from react ever since react 17. so that's a really cool feature there and here we're going to go to our file over here and say forward slash about and that's going to give us the about page and that's awesome because in react you had to bring in something like react router and do all that setup yourself here in next.js you just create a file a new component and you have a new page cool thing about this is you can actually nest files so you can say like um let's do tutorials slash javascript js so now we have a tutorials folder we have a javascript.js file and i can do export default function and we can name this javascript div javascript page and now i save and now we have this page if i go over here to forward slash tutorials slash javascript so the cool thing about this is that the files and folders generate your url structure for us so that's item number one item number two that i really really like about next.js is something that i had to build in uh to react.js automatic code splitting so to code split in react you would have to bring in something like react loadable or you would lazy load some components with next.js it comes out of the box for us and we don't have to write any special code for it so i can demonstrate this by going here i'm going to go into my terminal clear that out npm run build so i'm going to build out all of the javascript required to show off the site that we have here and we'll let that run here we go if i scroll up let me zoom out a little bit if i scroll up here we have a bundle for each specific page so there's the css there's our app there's our about page that we just created at 285 bytes tutorials javascript at 295 bytes so what's really cool about this oh and there's our home page for 3.47 kilobytes what's really cool about this is we had to do no extra code it came out of the box and we get that quality of life upgrade right out of the box for next js so the cool thing about this is that you shouldn't be sending your javascript files all of your entire app to a user if they just want to say i just want to see the home page right they shouldn't see 900 javascript files for all their pages they should only see one so that works out nicely that's code splitting that's number two number three on this section is api routes now api routes are really really cool because sometimes you might not be able to do everything you need to do inside of your javascript components instead of your react components sometimes you need a backend server to do a little bit more processing than a front-end component can do so in that regard serverless functions have come about and been a fantastic addition for building out these websites and the cool thing about next.js is that here in this api folder it gives us access to api routes which are serverless functions that are going to run so that we can use node and all the power that node brings all the power that node packages brings us and the server to do stuff inside of a file right here and the cool thing about this is your front end can actually talk to your api that you build all in your next js application so to demonstrate this if we're in the api folder i just go over here forward slash api hello and we need to run our npm run dev server again so let's do that so that's running and we go back here refresh and we should get some javascript out of there so that's cool and let me go over here and just update this real quick and say name is chrisev and twitter is chris underscore underscore sev okay so let's check that out refresh here and we get a brand new json response from our api now you might be wondering okay api routes are cool what are the main things that we could use them for api routes are very usable when you are building out applications and let's say you wanted to go talk to a third-party service like algolia let's say you had your api secret key and client key that's not something you want in your react front end code you want that on the server side where it's hidden from prying eyes on the client in the browser so being able to use your api here to talk to external services like stripe like algolia like all that good stuff is really useful number four on this list is image optimization so i'm gonna go into my explorer here and under public i have a bear.jpeg file and i went and grabbed this from on splash look how cute he is so i'm going to have this bear.jpeg i'm going to go into my pages let's go into index.js and actually let's delete everything here so it's going to go balance outward and i'm using emmett here for these kind of cool shorthand and i'm going to say image source is equal to forward slash bear.jpg and we don't need this up here so let's delete that and we don't need that so this is our new homepage just an image and let me go over here i'm going to open up our terminal our console our sorry network tab go to the image tag and i want to show you how next.js optimizes images for us i also have a full-sized video on next.js's image optimization but here i just want to show it real quick so i'm going to go to the homepage that is a 985 kilobyte file right there so 985 kilobytes is a pretty large file we can go over here and bring in the import image from next image and now instead of this i'm going to wrap it with an image tag right here and we got to give it a width so let's go for 1920 uh what height is 1080. so now just by changing out the html image tag for the next gs image component let's go back here we are down to 244 bytes right there so let me right click hard reload we get 199 kilobytes for this bears image so that's very impressive we brought that down by a fifth twenty percent of the original file size and that's all from just using next.js image component we can take this a step further and go layout is equal to responsive so that it will serve the correct file size based on the browser size so if i refresh here we get 216 then that's fine so i'm going to go to my mobile and let me try to get you more room here and if i do a let me zoom out running out of room over here so right click hard reload 17 kilobytes for this 400 pixel width image now that's gigantic savings compared to the 900 something kilobytes that it was before and as you scroll notice it'll start loading up a bigger file size based on what you want for your browser so really really impressive feature there with the image component and the image optimization definitely check out my other video on the image optimization stuff but the last one that i want to talk about here is kind of the big big feature that i really love next.js for all of the other ones you can add into react with some packages or a little bit of coding but having them in xjs is for sure a good piece of mind to not have to configure anything or write any new code but here my favorite thing is the ways that it lets us generate our site so i get asked a lot about scotch.io and scotch.io is the site that i built 2013 and this is a started out as a wordpress site went over to a custom laravel install i built my own cms that whole shebang but i get asked a lot what would you build scotch in these days and this next feature is a big reason why i would build scotch with next js and that is the ways that it can generate a site statically server side rendered or the dynamic incremental generation way we can generate a static site we can generate it from the server side and do server side rendering or what i really like is combining those two methods and saying okay well we're going to dynamically generate it on the server and then after that everybody that sees the page after that is going to get a static version so it's kind of the best of both worlds you don't have to do a giant html build up front and you don't have to do dynamic slow server side rendering you can do both and it's amazing so the way we can do that is using the export function get static props and the get static paths and i'll do a full video on how to do both of these better but with both of these we can generate dynamically and statically which is amazing and i'll definitely do a bigger video on this it's such a big feature that it requires more than this video can do but what's cool too is you can actually say let me clear this out let me open up package.json if you want to statically generate your site if your site isn't that large you can definitely statically generate it you can say export next build and next export so now this export command should build us out some really nice html pages and we can serve those html files so we'll run that we'll see how that goes optimize build oh and one thing to note here and a reason that you want to go for a dynamically generated site is the image optimization requires a node server so you can't use the static generation if you are using the image component so it does need to take a little bit more of a dynamic node deployment to do this so i'm just going to change that back to an image tag we'll delete that there and now we should be able to export this all right here we go optimize build and files were generated so we can go into our explorer this out folder is going to generate all of the html files and we can go serve those on a website so that's how we can generate html files for our pages or we can dynamically deploy our next.js application and i love that we have the option of both so all in all five really amazing features out of the box for next.js we have routing we have code splitting api routes um we have image optimization and we have the ways to generate a site so all five of those things out of the box for me is a compelling reason to use nextgs over just plain react so thanks for watching i hope you like this video i definitely have a lot more next.js content coming and if you did like this video please like and subscribe and i'll see you in the next one you

Channel: Better Dev

Views: 18,696

Rating: 4.9845562 out of 5

Keywords: web development, javascript, next js, server side rendering, next react, next js vs react, nextjs vs react, nextjs features, getting started next js, getting started nextjs, nextjs tutorial, next js tutorial, next js beginners, react for beginners, next js routing, next js code splitting, next js features

Id: 6jWWKczzGM0

Length: 14min 56sec (896 seconds)

Published: Tue Jan 19 2021