Next.js Is The Best React Framework

hello everyone and welcome back to my channel my name is harry wolf and i talk about code on this channel today i have a not quite hot take for you next js is the best react framework full stop if you don't already use nextjs as your go to react framework well this video should hopefully convince you to make a change and make next yes your new default go to if you already use nextgs then click off the video go have fun outside in the sun but for those of you still on the fence i have a very rich outline of points to convince you about why next js is fantastic from discussions of what is a framework why is it reactive framework and what makes nextgs so great these are things that if they sound interested to you then please keep watching with that being said let's get on with the persuasion first things first why isn't react a framework well don't take my word for it just check its website where it calls itself a library the line between library and framework is a little bit gray sometimes but the way that i typically sum it up is a library typically does one thing well and one thing only and in that case for react it's making ui user interfaces it does that really well really easily really efficiently frameworks on the other hand do a whole lot more the best example of a framework is rubion rails spring boots django these are massive code frameworks that do pretty much everything that you need for an application for free batteries included so what makes next.js a framework then well aside from its website telling me so man these websites make my job really easy it essentially does a lot for you by default it has lovely strong and consistent conventions that lets you not worry about configuring your application but making your application and in the world of react that is something that hasn't been around in a while so what does next chasse provide for you out of the box uh in short a lot it has a lot of things but one of the things that i love most about nextgs is it kind of blends the world of node where everything is small you kind of add things as you need and it blends the world of frameworks like ruby on rails which just has everything available at the default it makes this lovely little synergy where nextgs has all these things out of the box but you only need to use them as you need to whereas in other cases when i played around with other frameworks i found that i've had to kind of learn a lot to get started before i could even get going next video says if all you want to do is just make a plain vanilla react.js app that's all you need from us and we'll help you along that way that being said there are some essential features that next.js provides for you out of the box for free that are essentially required for making a production quality react app nowadays the first feature is routing uh this is kind of a hybrid feature but the first half of this is that it provides conventions on how and where to put your pages and it follows a convention that's kind of been stolen since the dawn of markdown blocking time from jekyll when jekyll was released in 2008. if you can believe that but essentially if you put a about.js file in the pages folder then nextgs will render it at slash about if you've ever written a markdown blog this is something that should feel quite at home with you it also provides dynamic routes for things that might not be as statically necessary but already here this is incredible because if you were to make a vanilla react app there's no routing provided by default you'd have to turn towards react router or some other routing library and then configure it to actually know how and where to show your routes with next.js it's all convention you put the file where nextgs expects it to go and next.js will just take it from there and that is just lovely to not have to worry about even better is that nextgs has two ways of rendering your pages which is uh probably one of the best features of nextgs in all honesty above all things else nextgs both supports static generation which again markdown blogs is its favorite friend markdown blogs love static generation caching for days or server side rendering you know how web pages used to be made in the 90s before static site hosting was invented that was a that was a joke but the thing that's amazing about nextgs is that you can choose per page which rendering method you want which is incredible it's one of those things that when you hear it for the first time you wonder why it was never not the case before and the way that you opt in and out is pretty pretty simple following the conventions that next yes expects from you feature the second is a incredible default developer experience and this is best summed up with four of the top features of nextgs the first one is built-in css support every web application needs styling of some variety usually css and nextjs has a solution for you not only does it have one solution it has three solutions which again a uh a glut of riches you have just importing plain style sheets if you want just like this so you can write regular old css and it works just as you're writing an html page which is fine but not probably how you want to write modern web applications nowadays you can do component level css via css modules where you follow again the convention of name module css modules is a wonderful way of scoping css to just a file that's a whole separate video to talk about here but importing styles from the styles and then using it as you want built in out of the box for free nextgs and of course uh last but not least is built-in css and js support and this is done either by inline styles which is lul or they bundle in their own style gx solution which i'm not a personal fan of this works fine just not my preference but if you want to add your own cssgs solution then that's an easy thing to do by following a simple walkthrough guide out of the box nextgs supports fast refresh which is a feature that is the successor to live reload essentially live reload was you save a file the website refreshed and showed you the changes fast refresh takes it up a notch where no refresh is required as you make your website and you change a file next js will push that file to the browser and then discretely update just the component that changes maintaining state which means that you have a button with a counter that you are incrementing the count and you change the color of that button on your source code when you save that it's pushed to the browser with the new color and the state saved it is once you go fast refresh there is no going back the developer experience here is incredible i i can never accept anything less than fast refresh having expressed it here uh for if you've never done fast refresh i encourage you to use next guest to try it out to see how incredibly amazing it is to play around with out of the box yes lens support this is oddly a new addition to nextgs for reasons i don't know but it's now here so you'll have some nice basic default esl tools to make sure that you have the most lint free web application possible built in by default no configuration required and of course last but not least is typescript support which is actually an opt-in and not provided by default but is provided out of the box and what i mean by that is that when you install an xjs app by default it's not included unless you opt into it but if you have an existing vanilla nextgs app you can add typescript support by just creating an empty tsconfig.js json file and once nextgs starts up the next time it'll see that it exists and then ask you to configure typescript support for your nextjs application it is just a wonderful experience and in some ways i'd argue this is not even a config for an xjs if you want to use typescript you need to have a ts config.json file so in many ways you're just creating a config file for typescript that nextgs realizes is there and then uses to add support to typescript to your application this is it this is all you need to do restart your next.js server and it will take it from there just an incredible way of adding incremental features as needed and as i mentioned before all these things that i've talked about require no configuration none they they there's no configuration required it is all out of the box for free if you want and need to which for 99 of the time you will not need you can touch you can create next next config file as an escape patch as you need it but again it is rare that you will ever need that so for all these common use cases it's just built in by default no configuration required the conventions are that good that sensible that makes the developer experience that enjoyable and there's a bonus fourth feature is that because nextgs is just one dependency in your json file as it adds new features and as you update your next gs version you get all you get all the new features along with it making it extremely easy to upgrade and also to to benefit from new things that are added a new thing that was added in version 10 was built-in image optimization support via the image the next.js image component this is similar to how you might see i think it has like you know the way that you see websites blur things from a lower res to a higher res this is now built in provided for you for free by an xgs team upgrading is typically very minimal as well there is a upgrade guide if you need it but typically the changes that you need are sometimes none and then and in the most extreme cases very minimal and less than an hour's worth of time so as new things are added and you update to the latest version of next js then you are ready to take advantage of all the latest greatest things i'd be doing you a service if i didn't admit that there are a few things that nextgs is missing that kind of uh not make it a full framework in my opinion however there are mitigation steps that kind of make these issues pretty trivial the first is a comprehensive data fetching solution um there's this data fetching guide and there are api endpoints on where you can fetch data whether at build time or server-side rendering but the there's no integrated fully thought-through solution on how to actually do data fetching and caching all these things luckily there are third-party solutions that kind of fill that gap wonderfully my personal favorite is something called react query um which fills that gap very easily it has a whole guide on how to integrate with nexus if you need to um and it looks kind of like this provider making queries there's also swr which is actually written by the same people who write next yes if you want to have that kind of uh cohesiveness there but it's actually incredible how similar these two libraries all are which makes the question why they both exist but that's a question for another day um related to data fetching there's also no built-in database support in xjs you're expected to kind of bring your own luckily next.js has a huge repo of example integrations with third-party libraries and other things and one of those is examples how to integrate with databases my personal favorite if it's no surprise is mongodb where there's a nice little example on how to integrate um nextgs with a mongodb database with a example here and an example of its usage right in here this is kind of the jumpstart way to get started with that and last but not least is authentication uh there's no built-in way of doing authentication with nextgs which is probably due to there being no built-in way of doing a database and doing data fetching so those kind of three things all go together which is why i think they're all missing from nextgs but again there are some lovely third-party solutions that integrate very quickly with nextgs that kind of mitigates the issue that is not there by default not every app needs authentication apps do but not every web page does and there's examples here on how to use it my personal favorite for auth is this library called next off js which i find to be just the most wonderful way of doing auth with xps it just makes it stupid simple to integrate with any provider that you might need apple facebook google email and it's also great because you own all the data it's open source you connect your own database and there's no third party required to actually get it running it's just code which is awesome so let's talk about competitors in this landscape and there's only three that i'm going to talk about just to not go for infinity and other things in the same area the first competitor which i would really call it one is create react app which is you know the tried and true create react app to get a react app up and running um it's truly not in the same category as next ges it's really in my opinion just a wrapper around a complicated webpack configuration file which uh is not to minimize the value that provides because webpack is tremendously difficult but it doesn't really provide all the niceties that nextjs does by default it's mostly just a starter kit with some nice defaults that are provided by webpack but not much beyond react and webpack itself it just lets you get going and kind of stops from there and honestly the thing that is my biggest pet peeve about create react app is that it is uh configuration adverse there is no way to configure any behavior in a create react app applications and if you just want to add css and js support that becomes a whole ordeal that is very hard to do with the create react app for that reason alone in many cases i find just turning towards an x-ray s which might be overkill for certain things just to be easier for my whole development model there's vite which is funnily enough made by created by the creator of uh vue js which is just funny to me it's a build tool it's kind of like a webpack on steroids in some ways but zero config as well sensible defaults but it's kind of built to just be for any front-end application uh has templates for any type of framework if you want so in that sense it kind of targets the front-end landscape not react itself meaning there's not many react specific features provided by that which is fine but again kind of lacks the uh framework niche of vitevit i don't know how to say it and last but not least there is a blitz js which funnily enough is actually built on top of nextgs which is cheating but also great because uh it gets all the benefits of next yes and then kind of brings in the missing pieces that i have lamented myself those being authentication which provides all hint has built-in authentication built-in database support as well and also a data fetching solution as well all things provided by default it is truly a frameworks framework a meta framework all those things but i haven't used it extensively so i can't really speak to it but if you want to have more things built in by default but cs is probably the way to go for you so hopefully that wasn't too much that's my reasons for why nextgs is the best react framework in many ways it is the only react framework in the truest sense of the word of a framework in my opinion outside of blitz gs which is built on nextgs again if you're making a react app today whether a simple just single page app all client-side facing or a full stack next gs react app from you know node server and all those things next yes kind of caters to both those use cases which is incredible you can kind of have your cake and eat it too and kind of transition as you need to here and there amazing defaults you can extend it as you need to it's truly nailed everything that you'd want from a developer framework so curious if you don't use nextgs why what are the reasons what could possibly be the reasons i am so curious to know let me know in the comments i'll happily chat with you in there to see what is not why you said pass on nextgs curious to hear that is this week's video i hope you enjoyed i'll see you again in next week's video when it is online until then stay happy stay coding bye you

Channel: Harry Wolff

Views: 5,952

Rating: 4.9439774 out of 5

Keywords:

Id: w44uCZwovLs

Length: 18min 21sec (1101 seconds)

Published: Mon Sep 13 2021