Introducing all the new features of Next.js 11 — Let’s make the web Faster

Introduction and full review of all the introduced features Nextjs version 11

Published in

Webtips

6 min readJun 16, 2021

In this article, we take a look at version 11 next.js, which is the latest version of the framework created by Vercel, and introduce all the new features added in this version in full.

In general, in the eleventh version of next.js, seven new features are introduced, which include the following:

Conformance
Improved Performance
next/script
next/image
Webpack 5
Create React App Migration (Experimental)
Next.js Live

In the following, we will introduce each of the features.

Conformance

first of all, what is Conformance?! According to Google developers, Conformance was an evolution.

Conformance is a system that ensures that developers stay on the well-lit path; it builds confidence and ensures predictable outcomes. It makes teams productive and becomes crucial for scale — as teams grow and more features are developed simultaneously. It empowers developers to focus on building product features, freeing them from minutiae and the changing landscape in various areas such as accessibility, performance, security, etc.

Conformance is founded on strong defaults and providing actionable rules that can be enforced at authoring time. This breaks down into the 3 principles which you can read about it in full at this link.

Through their work building large-scale web applications like Search and Maps, Google has proven that frameworks can play a crucial role in maintaining quality as teams and applications scale.
Today, Google’s Web Platforms team has begun open-sourcing their system with Conformance for Next.js.
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. These solutions free your team from memorizing all the latest rules for optimal loading performance, while still giving you the flexibility to make the right choices for your applications.

Improved Performance

One of the things that have received special attention in the new version of next.js is the improvement of performance. Versions 10.1 and 10.2 had excellent improvements so that the startup time was improved by up to 24% and shaved off another 40% of processing time for changes through React Fast Refresh. This resulted in an incredibly fast experience in this version of next.js.

But now in version 11, there are other amazing and impressive improvements. next.js created a brand new implementation of the Babel loader for webpack, optimizing loading and adding an in-memory config caching layer. In practice, this means no change for developers but will ultimately mean a faster development experience.

Script Optimization

Undoubtedly, one of the most interesting and useful features of next.js in version 11 is the ability to prioritize script loading. You can define strategy attributes and Next.js will automatically prioritize them to improve loading performance.

To do this, you must use the new component next.js, which is called “next/script”, and by adding the strategy property, you can specify your prioritization. The values you can set for your strategy property include the following 3:

beforeInteractive: For critical scripts that need to be fetched and executed before the page is interactive, such as bot detection and consent management. These scripts are injected into the initial HTML from the server and run before self-bundled JavaScript is executed.
afterInteractive (default): For scripts that can fetch and execute after the page is interactive, such as tag managers and analytics. These scripts are injected on the client-side and will run after hydration.
lazyOnload: lazyOnload For scripts that can wait to load during idle time, such as chat support and social media widgets.

<Script
  src="your address"
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

You can also run code after loading. For example, you can wait to execute code until after a user has answered consent:

<Script
  src={url} // consent mangagement
  strategy="beforeInteractive"
  onLoad={() => {
    // If loaded successfully, then you can load other scripts in sequence
  }}
/>

also changed the default script loading experience in Next.js 11 from preloading and async to defer. Third-party scripts often compete with higher priority resources, such as CSS, fonts, and images. Maintaining the proper sequencing relative to these resources, as well as other scripts, is an undue burden on developers.

By providing a Script Component with a default loading strategy of afterInteractive, developers now have better defaults for optimal performance, with the ability to still choose beforeInteractive as needed.

To learn more about the technical choices behind switching the default, check out the RFC and challenges with preload from the Google Chrome team.

Image Improvement

But in the new version of next.js, the “next/image” component has also included significant changes. these changes include:

1- Automatic Size Detection (Local Images)

Use the import keyword for the image src to automatically define width and height for static images.

import Image from 'next/image'
import author from '../public/me.png'

export default function Home() {
  return (
    // When importing the image as the source, you
    // don't need to define `width` and `height`.
    <Image src={author} alt="Picture of the author" />
  )
}

2- Image Placeholders

The second attractive feature of the image component is the addition of placeholder capability with optimized and smooth animation. next/image now supports blur-up placeholders to ease the transition from blank space to image and reduce perceived loading time, particularly for users with slower internet connections.

You can see an example of this animation:

https://nextjs.org/static/blog/next-11/Placeholder.mp4

To use blurred placeholders, add placeholder=”blur” to your image.

<Image src={author} alt="Picture of the author" placeholder="blur" />

Next.js also supports blurring dynamic images by allowing you to provide a custom blurDataURL, which is provided by your backend. For example, you can generate a blurha.sh on the server.

Another feature that is covered in version 11 next is about webpack 5. worked closely with the community to ensure a smooth transition to webpack 5, over 3,400 existing Next.js integration tests run on every pull request with webpack 5 enabled.

Next.js also addresses the issue that if your application has a custom webpack configuration, we recommend following the upgrade documentation for webpack 5.

next.js version 11 — create react app migration

CRA Migration

But along with all the features that have been introduced, a highly anticipated feature was also introduced in version 11 of next.js. This new feature is known as CRA Migration (Create React App Migration), which allows you to convert your Create React App to be Next.js compatible. But this feature is currently Experimental.

To help developers convert their applications to Next.js, next.js introduced a new tool to @next/codemod that automatically converts Create React App applications to be Next.js compatible.

The transform automatically adds a pages/ directory and moves CSS imports to the right location. It’ll also enable a Create React App compatibility mode in Next.js that ensures some patterns used in Create React App work with Next.js.

By leveraging the new transform, you can incrementally adopt Next.js while maintaining the functionality of the existing Create React App application.

To get started migrating your Create React App project use the following command:

npx @next/codemod cra-to-next

Next.js Live (Preview Release)

Next.js Live is a continuation of our mission to make development not only faster and more enjoyable, but crucially more inclusive of the entire organization. By leveraging cutting-edge technology like ServiceWorker, WebAssembly, and ES Modules, Next.js Live puts the entire development process in the web browser. This opens up possibilities like collaborating and sharing instantaneously with a URL, without a build step. For developers, this means a faster feedback loop, less time waiting for builds, and real-time peer programming and editing within the browser.