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:
Next.js in numbers:
Total Impact: 22850
Next.js is a no-brainer choice for any web project in 2022. It drastically improves developer productivity, while its other contributions are also significant, impactful benefits in their own right. There are, however, certain situations where it's not the optimal choice. (More details are in the Conclusions part.)
(Don't worry if it makes little sense now, there are instructions just a bit further down)
Before you dive in, make sure to take a look at the Table of Contents (yes, it's scrollable) to check the outline and find the most interesting parts you don't want to miss. There are a lot of gems ahead. Some of my favourites are: A list of tools and techniques to improve the frontend performance of Next.js projects. Introductions to next-runtime, a library to bring some of the goodies from Remix.run to Next.js. The exciting instant integration with Framer through URL imports and Handshake. A design checklist to help you bring out the most from Next.js projects. A guide to choosing a rendering mode. Practical tips on how to save money on Vercel hosting, and some ideas about choosing a serverless provider among a lot more, valuable and interesting facts related to the framework. But of course, the main aspect is doing a full context review. Let's get it on!
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)
While this review is not an introduction, I will still name the basic elements of the framework just to be clear about what we will discuss. This next section might be boring if you are familiar with Next. I tried to add in useful information here and there but feel free to skip forward in this case.
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: