Embarking on the journey of web development, I was naturally drawn to the booming world of Next.js. A framework that purportedly makes React.js even better – an enticing prospect. However, unlike my relatively smooth experience with web and React.js, Next.js initially proved to be a challenge to comprehend. The concept eluded me, and there was a certain resistance to embracing something new. This blog is an encapsulation of how I eventually embraced Next.js, offering a fresh perspective that might help others look at this framework in a different light.

It's not a Replacement

One BIG misconception I had when I started to learn NEXT.js is that it replaces React.js, ie how I work with React and is a complete change of flow, mostly because of how it was marketed by people in tech and just the general notion of NEXT.js is so much better than just REACT.

Next.js: The Meta-Framework

What's Next.js's deal? The term "Meta-Framework" seemed bewildering at first. Let's demystify it in simple terms.

What is a Meta-Framework?

if we go on to google it or the new age GPT-ing it will tell you something on the line of

A meta-framework is a higher-level framework that provides a structure, guidelines, or common patterns for creating other frameworks. In other words, it's a framework for creating frameworks. Meta-frameworks are designed to simplify and standardize the process of developing specialized frameworks for specific purposes. ...

and it goes on to explain this over 15 paragraphs.
But to keep things simple Meta-Frameworks are just a structure added over an existing system

Still confused?

Meta-Frameworks make doing the same things a bit easier and in most cases just delegate the task via abstraction, like say routing in React ( the whole adding router-dom and creating the router and routes and everything) taken care of, image optimization and other list of things which NEXT markets.

BUT, Next.js doesn't just stop there, unlike what I hope most people think about NEXT.js

It's not a Frontend Framework

And I know it sounds confusing React is a Frontend Library, and Next is a Meta-Framework based around it, so it must be a frontend Framework. and I was the same until I tried to understand how NEXT works and how it is making React better performant and demystifying concepts like SSG

Understanding Next.js

I learned NEXT.js is a Backend Framework that just utilizes React.js to provide a frontend, I know it might sound confusing but let me make it more clear.

What NEXT does is uses build tools to convert your React js Frontend Pages into a well-optimized website and it does all of this based on the Backend which is an actual abstraction this Meta-Framework introduces, and which allows us to use tech like SSG as on the build time we can decide if we have to fully build the page(Static Site Generation) or just provide the js build like how React.js does it (client-side rendering) or have the page build on request(Server-side Rendering)

Clarity Emerges

This explains a lot of things and answers a lot of questions I had about the framework, like why can I write APIS, do I need to write a separate Backend then? how will the database connection work for multiple users if I decide to go RESTful with the API other stupid questions I had talking to the community was helpful.

Conclusion

I hope this writing, which started as a puzzle has transformed into a revelation and was able to help clear some misconceptions and give a new perspective to understanding how NEXT.js works and where it fits in this large world of Web development.

Next.js is no mere substitute for React.js; it's a dynamic companion that amplifies and enriches the React experience.

Here’s to embracing change, propelling innovation, and coding a luminous tomorrow.

Happy coding, and welcome to the remarkable world of Next.js!