Building a Faster Web with 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
Nextjs 13 Component Toolkit
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.