Whats new in Next Js 11

Lets make the web faster with Next Js 11.

Next Js people are working really hard and getting some amazing features to market in the product .

The new features that are included are

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

Lets talk about all of them one by one

Conformance

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.

What conformance basically allows developers is it allows them to follow rules while writing code even if the developer will forget to use some good practice this system will automatically do it for them.

It will also support Eslint out of the box.
In order to use it you need to run
npx run lint

Performance

Since Next.js 10, next js team has been obsessed with further improving the developer experience of Next.js.

Next.js 11 includes another optimization to Babel to further reduce the startup time. They have 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.

next/script

This is a very great feature that comes in next js 11 .
What this lets you do is it lets you add scripts to your site however you want like for example
If there is a script that you want to run even before the page becomes interactive you can do that .
If there is a script that can be delayed and can run after the page has been loaded it will allow you to do that as well.

very cool and useful feature.
To do this you must use the next/script component and then you can use the strategy

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 For scripts that can wait to load during idle time, such as chat support and social media widgets.

<Script
  src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.map"
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

next/image

Image component has improved quite a lot and this is also a useful feature and would be used by many developers globally.
This update for the image will let you

• use a placeholder for the image while it is being loaded (blur placeholder).
• You no longer need to give the height and width for the image now. Example <Image src="abc.jpeg" alt="some very cool picture"/>

For using the blur you can do placeholder="blur" and it will automatically blur the image till the time it will be loaded
Example
<Image src="apple.jpg" alt="an apple a day keeps doctor away" placeholder="blur"/>
[Example of the blur]
https://nextjs.org/static/blog/next-11/Placeholder.mp4
Next.js also supports blurring dynamic images by allowing you to provide a custom blurDataURL, which is provided by your backend.

webpack 5

Another great feature allowing devs to upgrade to webpack 5 hassle free.
They 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.
They also said that if your application has a custom webpack configuration, we recommend following the following steps

CRA Migration(Experimental)

Since many people were switching from Create React App to next js so these people came up and made the journey effortless (still working on that but you get it)

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

To get started migrating your Create React App project use the following command:
npx @next/codemod cra-to-next

Its still a experimental feature.

next js live

Next js live is a very very cool feature that allows users collaborate on the fly without using any other tool .

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.

Want to encourage me to create posts like this more
Buy me a coffee