The Best Framework To Use For Your Next(.js) React Project

The Best Framework To Use For Your Next(.js) React Project

ยท

5 min read

Hey Everyone! This is my first post for the Leap Into The Future with Next.js & TailWindCSS & the HashNode Platform! Today I'll be going over the main framework I will be using throughout this series, and as you might have guessed it from the title, it's NEXT.js .

image.png

So.. What Exactly is Next.js?

First let's get over to what the Official Site and The Documentation say..

"The React Framework for Production". Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web applications.

Okay.... so what does it really mean?
To put it simply, it's just a light-weight Javascript Framework, which helps you to render( or lets say process the final view) of your react website or application right on the server, even before the user accesses it, along with many other cool stuff pre-built for you like Routing (Oh, how much I've hated this ๐Ÿ”จ ) and much more.

Due to it being versatile and configurable down to the core, it is being used by the all the famous companies and organizations for their web apps and website..We'll discuss this in detail in a later section, So hold tight!

So How Does This Server-Side-Rendering Help?

You have a curious mind! I like it ๐ŸŒธ Lets take an example to easily understand this.
Eli loves flowers. So she searches up on the internet to find out more about the wild flowers growing in her backyard, now there are multiple sites which show nearly the same info. She clicks on the site which appears 1st and it takes about 8-9 seconds to load, because even though she had a good connection but the Phone was on a Lower-end, whilst the 2nd site site just took 2-3 seconds to load because the side was not rendered on her phone but rather on the server and the processed page was displayed on her device.
Now lets just forget about Eli, and think about it yourself, it is but natural that the next time when you want to search something similar you will for sure use the one which loaded faster and even though had some cool looking animations it wasn't lagging. So that is what's Server Side Rendering or SSR in short, The page gets rendered on the server and is then displayed to the client and thus making the User-Experience Blazing Fast โ˜„๏ธ And did i tell you that Next.js makes your Site SEO Friendly? so that means, the site which Eli clicks first will most probably be yours, and hopefully you built it with Next ๐Ÿ˜‰ so it loads up really fast. ๐ŸŒฉ

How Is It Better than the others? What about CRA?

Well Everybody who has worked with React knows about CRA or Create-React-App. CRA too is a framework built on top of the React library which helps you to set up your project without any hassle.
Both CRA & Next Shine at what they are meant for, but, when we do a deep comparison, I'd say, we see the winner right away. Well, I won't spoil it for you ๐Ÿ˜œ read on and find out yourself ๐ŸŽ–

Server Side Rendering

C.R.A : It does not support SSR out of the box, but, You can configure it manually which is a hefty and difficult task to do. (Believe me ๐Ÿ™…๐Ÿปโ€โ™‚๏ธ)
NEXT : It comes with SSR out of the box. (well that's the main highlight ๐Ÿ™‚)

Maintainability

C.R.A : If you can keep up with the Updates, then it's really Easy to maintain
NEXT : It is also well maintained. They release regular updates.

Configurability

Well this is what I would say, End's the Battle sort of thing. So... read on.

C.R.A : Create React App doesn't leave you a lot of room to configure it. Configurations like webpack config cannot be changed unless you stray away from normal CRA way (eject, rescripts, rewired). Basically, you have to use what's configured in react-scripts which is the core of CRA.

NEXT : Almost everything is configurable. If you check the example NextJs templates, you can see files like babelrc, jest.config, eslintrc etc that you can configure.

Typescript Support

C.R.A : Supports out of the box. You can initialize CRA app with typescript with npx create-react-app my-app --template typescript
NEXT : Supports typescript out of the box. Start with configurations for typescript with touch tsconfig.json

React Hooks & Redux

C.R.A : Supports both hooks as well as Redux.
NEXT : Supports both hooks as well as Redux as well.


Conclusion

Form the Comparison Above, we can totally see that Next.js is the winner ๐Ÿฅณ as it excels in a lot of stuff which every web-app requires nowadays to stay in this Huge Competition of ever growing Web Apps.

So That was it folks!
I hope that I was able to bring light upon all the Good Features of the NEXT.js Framework and as to why I want to use this for this series and as to why every big company like Github or Netflix are bringing it in use. Make sure that you follow this series as well will start working on projects very soon.
And If you liked this Post then please do support me by sharing it!๐Ÿ˜Š

Hope You're have Safe but Spooky October. ๐ŸŽƒ

Did you find this article valuable?

Support Deepak Singh by becoming a sponsor. Any amount is appreciated!