What's new in Next.js 11?
Tags: nextjs, react, webdev, javascript
Published: 2021-06-18 12:35:29

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__

```bash
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__

```jsx
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 <Image> 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__
```jsx
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.

![Black t-shirt on a blue background going from blur to clear](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6o5z6snfta6o65u2qi7.gif)
_Image source: nextjs.org_

__Usage__

```jsx
<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.

![Browser window that shows the new Next.js collaborative environment with the code editor on the left and the rendered page on the right, in addition to all members that are collaborating in real time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylhu72z265suqs49u7ku.png)



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.


![Collaborative bar that shows connected team members with different colors and buttons for code, draw and chat actions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/157yuncnol7sdi7qt7f2.png)
_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:

```bash
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](https://instagram.com/underscorecode) and [Twitter](https://twitter.com/underscorecode) for more related content.