Disclaimer- This blog was put together after a short discussion with a friend and the intent is to give a brief idea why Next.js should be adopted and getting you interested in it.

Next.js 11 is the latest update to the famous and in-demand React framework. It has been around for only a couple of years now, however it is already one of the most popular tools in the React ecosystem with a bunch of new and exciting features. If you are interested in getting the gist of why Next.js and how Next.js can improve the performance, UX, and SEO of your app.

Well, you've come to the right place!

Why Next.js?

As Web developers, we have been using Node.js since its very establishment and it has been been an epitome for us as it focused on speed and performance. When React JS came in, it was a perfect fit because by this time we were already using JavaScript and NodeJS for the front and back-end of applications. So as React JS has evolved to be a de facto for building website front-ends likewise, we can turn our heads to look at what Next.js has to offer.

Being web developers we are bound to think of SEO and organic traffic, where the need to cut down the time to first draw or need OG tags is considered to be an important factor for every business Nowadays, makes Next the right choice. Another important reason is - it's built on top of React and it is one of the technologies listed in the Technology Radar in the “Common” category of most of the tech firms.

But it wouldn’t have been appreciated if Next.js wasn’t good at what it does… right – so what does it do exceptionally!?

Server side rendering & static site generation with Next.js

Next.js jumped into popularity as it resolves one of the major challenges web developers try to accomplish these days which is swift and smart ways of rendering data on the client-side, now you might immediately think of SPA's, well I did. No doubt SPA's have shown an improved display of UX with additional interactivity; however, if we try to look at the actual availability of the content in the app - it is only available when it is actually executed in the browser (even web crawlers find it difficult to read the text content of such applications). Subsequently, the SPA's remained nearly anonymous for popular search engines such as Google despite their popularity.

Next.js provides an unconventional solution for server-side rendering (SSR) of React components. It was not simple to render the JavaScript code on the server and send indexable HTML to the user until Next.js came in. Although it wasn't impossible to do so, nevertheless it needed a lot of tweaking with the architecture of the application or issues related to caching and server load.

When it comes to SEO-friendly ways of static site generation (SSG) there are plenty; however, Next.js divergently does this in a way that generates the HTML during build time rather than during runtime. In this case, when a user requests a page, a pre-build static HTML page is sent to them. This approach is not quite suitable for SSR where the applications are interactive and take a lot of user input as the UI might need to be rebuilt every time new input is provided. It's preferable for simple websites (such as brochure displays, blogs) in which the content doesn't change often based on the user's actions.

SSG vs SSR overview

Automatic code splitting

Code splitting as you would already be aware of is just dividing the code into smaller chunks to make them available dynamically as requested instead of loading the entire application at once. These chunks can correspond to dynamic imports, bundled modules, or route-specific modules. Code-splitting in Next.js is inherently different than in React: nextjs.org/#automatic-code-splitting facebook.github.io/create-react-app/docs/co.....

It's automatic, handled server-side, where it can also get populated if necessary -with asynchronous data. The benefits of this on browser performance as well as developer performance should be self-evident.. This also means code isolation - even if a certain page does not work, the entire application is not going to stop working.

Hot Module Replacement (HMR)

HMR makes it evident for the developers to dynamically look at the changes live in the application while developing. While Next reloads only the module that has been changed, contradictory to the traditional methods, it apparently reduces the time required to actually see the change on the screen. This might be less relevant for an end-user but its positive impact in terms of reduced development time and increased efficiency in developers intern benefits the clients.

Next.js – summary

With the great capability to make web applications more desired and useful for users and a bunch of interesting benefits for developers, Next.js seems predestined to become an integral part of the React ecosystem. The way it's progressing, it is the foreseeable future. With Next.js, you get:

• Refined development process = cost and time benefit to our clients

• Upgraded performance = faster applications

• Revamped SEO = more indexable, SEO friendly applications

Now as we have a brief idea about the reasons why and benefits of using Next.js, I am going to quickly introduce you to the concept of Conformance in Next.js which is one of the many new and exciting featured by Next.js.

At the Next.js Conference on June 15, 2021, developers from around the globe joined to spectate the launch of Next.js 11, the latest release from the Vercel team. The updates and new features incorporated in Next.js 11 have offered significant improvements to an already popular library.

Conformance isn't fundamentally a feature in itself, but a system. An extended system of best practices that sets out to solve a particular problem. The examples of which are defined below 👇

It is very easy to write working code but quite hard to write readable and bug-free code, here is where Conformance comes to the rescue. Conformance in Next.js originates from a team at Google web platforms and Next.js being the first of the frameworks to see a lot of current optimizations available.

It works by directly implementing the solution through the framework responsible for building the application/website. The solution could include a custom plugin and shareable configuration to make it easier to detect common framework-specific issues during development or build time. This gives us an opportunity to focus more on the features and worry less about the rest without sacrificing anything.

One example of a framework-specific issue is - Only Call Hooks at the Top Level, don’t call Hooks inside loops, conditions, or nested functions in react. This ensures the Hooks are called in the same order each time a component renders. That’s what allows React to accurately preserve the state of Hooks(useState and useEffect).

Conformance is a system that provides carefully crafted solutions and rules to support optimal loading and Core Web Vitals, with further additions coming to support other quality aspects like security and accessibility.

You may be reading this article and thinking something like this 👇

How does Conformance stand out from tools like ESLint? How do they differ?

Simply put ESLint is like a subset, it's one of the tools identified to be an important part of Conformance in frameworks. Next.js has out-of-the-box support from ESlint as of this update and hence if you start a new project ESlint would be ready to go or can be easily added to an existing project.

I am sure you would have thought of trying out Next.js for your application at least once, If not let me tell you, one more interesting fact about Next.js It has been designed for gradual adoption. This means with Next.js, you can continue using your existing code and add as much (or as little) react code as you need. By starting with less but incrementally adding more pages, you can avoid a complete rewrite of the code.

Know more about Next.js https://nextjs.org/docs

No matter you are starting with a single static page or deploying a dynamic site with millions of pages, Next.js is the hybrid framework that meets you where you are and grows with you.