Next.js - Full Context Review

In 2022, that's a valid question! With the amount of post, videos, tutorials, crash courses, even books out there about it, you might wonder, is there anything left that's worth covering? The obvious answer is yes, there is. You are not reading another one of those shallow introductory posts. Here at the Full Context Development blog, I deliver something different.

Following a well-defined evaluation method, I go from technical details to real-life outcomes and give you an in-depth, practical overview of how to create the most value with a given technology. It's also like a meta-review. I process the official and community coverage of the tools and document the most important concerns you have to keep in mind while working with them. Like a one-stop guide to best practices and handling common challenges.

So what about this article? Besides all the above, you will learn every nitty-gritty, technical detail of Next.js that will influence the financial performance of your software, short-, mid- and long-term. These are the factors you should get right on a Next.js project in order to maximize profits. I will put the influence of Next over this area into numbers and show you the exact business metrics and mechanism of how it leads to increased revenue and reduced costs. Why? As Patrick McKenzie @patio11 famously said, these are the real problems, sofware engineers are ultimately hired to solve. Here are the main stats right off the bat:

What I'm not going to do: is introducing how to work with Next.js from the ground up. Instead, I will analyse the core technical design of the framework, especially the building blocks that are relevant in identifying its influence over the real-life outcomes of using it. Right after a quick look back on why does it exist in the first place. (it's relevant)

How it all started: Do you remember the days (OK, years...) around 2015 when JavaScript fatigue was in full swing? New frameworks and build tooling were constantly popping into existence. People memed about choosing a project setup taking a full month. That was the environment where Next.js was born as an answer to these problems.

And to one more fundamental issue. People realized SPAs are not great for SEO, but still wanted to use them for many valid reasons. SSR was "invented" to save the day, but it was extremely difficult to set it up on a React project. Not to mention in combination with the myriad of other necessary tools. (Looking at you CSS-in-JS)

So let's see the full set of what Next.js is and how it solves these problems and much more.

Then continue with the main structure of a Next.js application. The details will be discussed later at places where their influence is most relevant.

This structure and feature set increased developer productivity so much that most metaframeworks created later adopted the same or a very similar approach, often declaring that they are inspired by Next.js. This trend led to the state where we are now in the front-end community: