On June 15, the Next.js Conf 2021 was held and brought with it the introduction of Next.js 11.

This new version of the framework brings associated some new features that we'll be discussing in this article.

Worth to mention that the team put a lot of emphasis on the balance DX-UX (developer experience-end user experience) and also the great performance results they're achieving with every new version of Next.js.

After this brief intro, let's dive into the new features of Next.js 11:

Conformance

Conformance is a new system added to Next.js 11 that provides developers with guidance and standards to implement best optimization practices when coding.

This is really useful to avoid having to memorize every single rule for optimal loading performance of your code.

Also, Next.js 11 now supports ESLint for framework-related issues, contributing to a better developer experience.

Usage

npx next lint

Script optimization

For script optimization purposes, in this new version of Next.js, a new type of component has been released: the script component, which allows developers to prioritize the loading of third party scripts.

Sometimes, we developers struggle deciding where to place our scripts in order for them to be loaded and executed properly.

With this new script component, we can set the priority of scripts through the prop strategy, to which we can pass three different values for three different kinds of strategies:

• beforeInteractive: For scripts that need to be retrieved and executed before the page is interactive.

• afterInteractive: For scripts that can be retrieved and executed after the page is interactive.

• lazyOnload: For scripts that can wait to load at idle time.

Usage

import Script from "next/script";
...
<Script src="auth.js" strategy="beforeInteractive" /> 

Image improvements

With Next.js 10, a new component for image optimization was introduced, since images traditionally take up a lot of space on web apps and this often results in poor performance.

The component has now a couple of new functionalities for even a better image optimization.

Using import to add images

This method automatically calculates and assigns width and height values to static images that are part of our project repository. This helps reduce the cumulative layout shift, a measure that sums all layout shifts on a webpage, that is, those changes in visible elements that aren't caused by user interaction.

Usage

import landscape from "../public/images/landscape.png";
...
<Image src={landscape} alt="Beautiful landscape of mountains" />

Placeholder

When a user visits a webpage for the very first time, large images can take a while to load (especially when using a slow internet connection). This can result in a temporary blank space until the image appears.

To avoid this behavior, a new placeholder prop for the image component has been introduced in this new version of Next.js. We can use this prop to ease the transition, which will show a blurry version of the image until this is fully loaded.

Image source: nextjs.org

Usage

<Image src={landscape} placeholder="blur" alt="Beautiful landscape of mountains"  />

Webpack 5

As of version 10.2, Webpack 5 became the default bundler for Next.js applications, but in order to use it, it was necessary to add a flag in next.config.js to specify the version of Webpack we were going to work with.

With Next.js 11, you don't need any extra configuration to set Webpack 5 as your application bundler. It is automatically ready to use right out of the box.

Next Live

Definitely one of the most important features of Next.js 11. Next Live basically means team collaboration in real time. It allows collaborators to share, comment and edit code within the browser itself from anywhere in the world, by just sharing a URL, without a previous build step, which makes the process fast and efficient.

Another point in favor is that it also provides offline access to let the team work on the project when they don't have internet connection.

Images source: nextjs.org

CRA Migration

With this new feature, every Create React App application is now Next.js compatible by just running the tool @next/codemod. By doing this, a /pages directory is automatically created within the project and CSS imports are relocated to their proper location.

This feature is still experimental and it wasn't mentioned in the conference, but it appears on the Next.js related docs.

Improved performance

The performance of the framework was also highly emphasized: the startup time has been improved by up to 24% and processing time for changes has been cut off by up to 40% as of Next.js 10.

Besides, Next.js 11 also includes a new implementation of Webpack's Babel loader to keep reducing the startup time.

To take advantage of all these new features, we just have to keep Next.js updated, by running the following command:

npm i next@latest react@latest react-dom@latest

And that's all for today 🙂

I hope this article has been helpful for you and I'll see you all in the next.

🎉 Don't forget to follow me on Instagram and Twitter for more related content.