Building a Faster Web with Next.js 13
Building a Faster Web with Next.js 13

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.

With 3000 Components
With 3000 Components

With 10000 Components
With 10000 Components


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!

Turbopack Stats
Turbopack Stats

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.

Next Rendering Info
Next Rendering Info

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.

Convert more visitors, guaranteed.

Guaranteed conversion lifts backed by rigorous testing and optimization until your new design wins.

Arrow
Get program details
Big ideas.
Bigger results.

Schedule a free strategy session.

No-pressure
consultation

This call is about your goals, not sales pitches. No pressure, just clarity.

Actionable advice

You’ll walk away with practical insights—even if you don’t hire us.

Quick, clear pricing

Get your fixed-price proposal quickly, so you can make an informed decision fast.

Their initial website creative inspired us and brought us down a new path as a brand and led us to take on a new strategy. These guys are constantly looking to improve our site and help us in any way possible

K. Pia

YumEarth,
Director of Marketing

I had the pleasure of working with the Electric Enjin team for over three years and can confidently say that they are a top-notch digital agency.

P. Beaugard

Dooney & Bourke,
Director of Ecommerce

Whether you’re looking to launch or evolve your brand, Electric Enjin brings the expertise to realize scale and growth through creative/UX transformations and innovation.

A. Walker

Vice President, Media

Not ready to book a call yet?

Prefer email or just want more info first? Drop your details below, and we’ll reach out with everything you need.

Submit Message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.