Next.js 13

One week ago, the team at Next released the newest version of Next.js, with some monumental changes. Before getting started and addressing all the new features and improvements, it is worth going over how popular and widely used Next is. With over 2400 contributors on GitHub, and over 200 million downloads since its conception in 2016, Next.js is one of the most used and respected React-based frameworks. The headline of the conference and the recent version update is “Dynamic Without Limits”, and with the recent release of version 13, that is more true than ever. Throughout this article, we will go over the 3 major categories of changes that Next.js has released: A new and superior compiler infrastructure, an updated rendering engine, and an improved component toolkit.

Nextjs 13 Turbopack

       Let’s start with the largest and most impactful change Next.js released in this version, the compiler infrastructure, Turbopack. In order to understand the impressiveness and gravity of the new compiler, we need to first look at the predecessor, Webpack. Webpack has been widely used for over 10 years now and downloaded over 3 billion times. At its conception, Webpack served its purpose, but as technology has advanced - developers have reached the limits and full capabilities of Webpack. So how has Turbopack pushed the limits further? Turbopack is a Rust-based successor to Webpack, and even the creator of the Webpack joined the Vercel team to work on Turbopack. When Turbopack performs a task, it never has to run it again, significantly decreasing bundling times, and showing updates 10x faster than Vite.js and over 700x faster than Webpack. As an application scales, and a site gets larger and larger, the benefits of Turbopack can be seen more clearly.

‍

‍

And like every feature released with Next.js 13, they can be used right now. To start using Turbopack as the bundler instead of Webpack, simply upgrade your application to Next.js 13 and run: next dev -- turbo

Turbopack will be the bundler for all Next.js production builds, locally, and in the cloud. And to top it off, Turbopack is fully open-source!

‍

Nextjs 13 Rendering Engine

The next major feature upgrade with this version release is the updated and improved rendering engine. The rendering engine behind Next.js has always been one of the most popular and easy-to-use features. There is no configuration necessary to make a route, just simply create a new folder in the /pages directory, and a route is made! But like everything, there is always room for improvement, and that's what Next.js did with this update. The new Next.js router keeps the same syntax as before, but now has support for Nested Layouts. This makes it easier for components to share and preserve state, which prevents heavy re-rendering of component data or even re-rendering large animations. Along with the ability to create custom error rendering and loading with an error.js or loader.js file in the /app directory, Next.js routing is more flexible and dynamic than ever. The new Next.js router gives all the benefits of static data fetching, server-side data fetching, ISR, and SWR in one hybrid solution. With this upgrade, developers can build faster sites by shipping with less client-side JavaScript.

‍

Nextjs 13 Component Toolkit

The last major upgrade to come with this version update is still as impactful and useful as the others - an improved and innovative component toolkit. Starting with the next/image component, which is said to be used by over 70% of next.js users, and results in increased core web vital scores, is now even more improved. Images account for 44% of a page's weight on average and making a site fast with third-party hosted images can be troublesome. With next/image, the performance and developer experience is seamless. The Image component brings us native lazy loading, better performance, improved accessibility, and reduced size (across all major browsers), all while using less client-side JavaScript! This version upgrade didn't just stop with the image component however, next/font has also been dramatically improved. This component, which was developed in collaboration with the Chrome team, removes external network requests by eliminating connection time with 3rd party hosts. Whether it be a Google font or a custom font locally, Next.js can now deliver it automatically, and by doing so it can avoid 99% of layout shifts caused by custom fonts and 100% of visual disruption caused by moments of invisible text. Lastly, Next released the new Vercel OG image generation. This allows for dynamic social cards to be generated 5x faster than existing solutions and therefore increase conversions and SEO. In some cases, having an Open Graph image can increase click engagement by up to 40%!

"Next Toolkit Updates"

Nextjs 13 Vercel Preview Commenting

While those were the major changes shipped in Next.js 13, and all of them can be used right now, there is still one more major improvement to touch on. And that would be the live preview commenting released by Vercel. On any preview link, inside or outside collaborators can leave comments on sections, components, or copies, in real-time. The commenting feature integrates with Github and has a Slack Beta App to send instant messages when a comment is made. This creates an all-in-one place to develop, build, QA, and ship a product faster and easier. This is a major improvement for teams to build with each other and communicate as the project progresses and is being developed.

Next.js 13 has some major improvements and definitely will go a long way in helping developers build a faster web. Dynamic Without Limits, was the headline for this version update, and after one week of it being released, Next.js is much more dynamic. That can be easily seen with the new bundler Turbopack, OG image generation, an improved routing engine, and more. Next.js is great for teams looking to build complex dynamic applications and makes development and scalability more seamless than ever before.