At the 2021 next.js conference on June 15, developers from around the world witnessed the launch of next.js 11, the latest release from the Vercel team. The updates and new features included in next.js 11 provide significant improvements to an already popular library.

In this article, we’ll take a closer look at some of these updates, which impact both the user and developer experience. Let’s get started!

consistency

At the heart of conformance is a set of principles or coding guidelines that take some of the decision responsibility away from the developer. By setting defaults and providing guidelines, it is easier to achieve the desired results and prevent common errors.

According to the Next. Js team, “Consistency is a system that provides carefully designed solutions and rules to support optimal loading and core Web Vitals”.

The new consistency principle in next.js 11 can be broken down into three areas.

1. Strong defaults

The framework must establish certain design patterns at its core that make it hard for developers to do wrong.

2.2. Operational rules

Despite the powerful defaults, in some cases the onus is on the developer to choose between two potential paths. An actionable set of rules will make it easier for applications to adhere to strong performance standards while still allowing an adequate level of customization.

3. Authorization time

Writing time focuses on performance during a feature’s development cycle rather than after production. Performance must be considered before the code is submitted, not as an analytics-based metric after the product is released.

One of the easiest ways to enforce the write-time principle is through refresh rules. Consequently, next.js 11 supports ESLint out of the box.

To take advantage of these features, you must upgrade to the latest version of next.js by running the following code.

npm i next@latest react@latest react-dom@latest
Copy the code

Enable Linting by running the following code.

npx next lint
Copy the code

As soon as we upgrade our version and enable ESLint, we start to receive warnings that remind us to move in the direction of industry best practices and help our applications comply with conformance guidelines.

The script to optimize

Many sites include third-party scripts for analytics and advertising.

The loading order of scripts has a significant impact on page performance, especially when dealing with several external scripts on a web page. If not managed properly, scripts can seriously degrade the user experience.

Next.js introduces a script component with a Strategy attribute that handles many of these issues.

Let’s test it out! One obvious change is that we no longer need to wrap the local HTML script tags with the next/head tags.

import Head from 'next/head' function Home() { return ( <> <Head> <script async src="https://polyfill.io/v3/polyfill.min.js? features=WebAnimations" /> </Head> </> ) }Copy the code

Instead, we can use native HTML script tags directly, as shown in the figure below.

import Script from 'next/script' function Home() { return ( <> <Script src="https://polyfill.io/v3/polyfill.min.js? features=WebAnimations" /> </> ) }Copy the code

In this example, we are advised to use the beforeInteractive policy to load our polyfill. Let’s change the policy and see how it affects the loading script!

beforeInteractive

The script is injected into the HTML on the server side and runs on the browser before the bound JavaScript runs. Using the following code block, we can see that in the network tag, the network call to get the polyfill comes before everything else.

<Script src="https://polyfill.io/v3/polyfill.min.js? features=WebAnimations" `strategy="beforeInteractive" />Copy the code

afterInteractive

If we change the policy to afterInteractive, the script will execute after the page becomes interactive. In the Network TAB, network requests are located at the bottom of the page, which prioritizes more important tasks.

lazyOnload

Change the policy to lazyOnload and tell next.js to load the script at idle time. The web request for polyfill moves further to the bottom of the page; There are no other scripts that load lazily, as shown below.

onLoad pro

In addition to the above customization, if we want to execute some code after the script loads, we can use the onLoad item in the script tag. The onLoad item ensures that the script above is loaded, allowing functions to use the script’s functions and variables without crashing.

<Script id="my-script" src="https://polyfill.io/v3/polyfill.min.js? features=WebAnimations" onLoad={() => { // this executes after the script is loaded }} />Copy the code

Image improvement

Next. Js 11 includes improvements to the Next/Image component, such as reducing layout offsets, to provide a smoother experience for end users.

Dimensional detection of static images

Previously, height and width items were required to render an Image using the Image component. These props allow next.js to recognize the size of the image and render a placeholder, preventing layout offsets and cluttered user interfaces.

<Image
  alt="Fixing"
  src="/fixing.png"
  layout="intrinsic"
  width={700}
  height={475}
/>

Copy the code

Next. Js 11 provides support for SRC items, which can be applied using the import keyword. If you import the source code this way, you do not need to specify height and width items separately.

import source from '.. /public/fixing.png' <Image alt="Fixing" src={source} layout="intrinsic" />Copy the code

Image placeholder

In next.js 11, the Next/Image component supports a new placeholder prop that sets value to blur on slower connections. The Next/Image component will display a blurry, low-resolution image when the original image is loaded.

<Image
  alt="Fixing"
  src={source}
  layout="intrinsic"
  placeholder="blur"
/>

Copy the code

The blurry image will be displayed for two to three seconds before the final loading of the original image.

In addition, Next. Js 11 provides an option to provide a custom placeholder via the Image tag, which can be displayed using the blurDataURL prop. The value provided to the item can be generated using an application such as blurha.sh.

Webpack 5 is supported by default

Webpack 5 support was announced in version 10.2 for all Next-.js projects that do not have a custom Webpack configuration in their Next-.config.js file. A custom WebPack configuration looks like the code below.

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    return config; // return the modified config
  },
}

Copy the code

Starting with version 11, WebPack 5 is the default build tool for all next.js applications, regardless of custom configuration. Newly built projects will be able to use all of the following optimizations that WebPack 5 brings.

Improving disk caching

We know that we can use the command next Build to trigger the build. But what if very little changes between the two consecutive builds we trigger for the project?

Webpack 5 allows you to conditionally recompile only files that have been changed. Performance is improved because we don’t have to reprocess unchanged block files.

Improved quick refresh

With WebPack 5, Next. Js 11 recognizes quick refresh as a special task and performs it with a higher priority, making it faster to refresh every time any code changes are saved.

Long-term asset caching

With the implementation of WebPack 5, the build process for the build command is established. If the code snippet does not change, the hash value generated during subsequent builds does not change, which means that the file hashed in the browser can be reused for a longer period of time.

Improved tree shake

Webpack 5 provides the ability to tree shake commonJS modules to remove unused code from bundles.

Migrate from the Create React App

As a result of community requests, the Vercel team introduced the @Next/Codemod tool, which supports compatibility between React and next.js projects.

We can run the tool, provide it with a project generated using the Create React App script, and convert it to a next.js project. Let’s try it

First, create a React application using the command.

npx create-react-app cra-demo

Copy the code

Now that we have initialized a new React project, we can run our project using commands.

npm run start

Copy the code

You’ll see the familiar React screen.

Next, run the script to migrate from the Create React App to the next.js project.

npx @next/codemod cra-to-next cra-demo

Copy the code

As you can see, the script made several changes to the version library to port it to next.js. These changes include.

  • Changes to scriptspackage.json
  • increasedpagesFolders, which are a major feature of the Next. Js repo
  • Changed by creating_app.jsHow to import files into the CSS
  • To create anext.config.jsFile and make statistics on it

Babel optimization

Next.js 11 uses a new implementation of WebPack’s Babel loader, including an in-memory configuration cache layer, which further reduces startup time in improvements to 10.1 and 10.2.

Next, js

The Vercel team used next-generation front-end technologies, such as serviceWorker, WebAssembly, and ES modules, to provide a collaborative environment within the browser. With the Next. Js Live feature, developers and designers can collaborate by sharing a URL. The Live feature is currently running in early access.

conclusion

Clearly, these upgrades make up one of the most prominent releases of next.js ever

Core changes to reduce startup time, such as optimization of Babel, as well as consistency recommendations, encouraged developers to adopt mature solutions. Other improvements are loading images and scripts to make the user experience seamless. In addition, we now have the ability to use real-time capabilities to improve collaboration.

For these and other reasons, the Next. Js 11 version looks promising and worth upgrading. Give it a try and let us know what you think in the comments

The new features of next.js 11 first appeared on the LogRocket blog.