What’s new in Next.js 11?

What is new in Next.js 11?

On June 15, 2021, the Vercel group brought Next.js 11 to the conference. Next.js is a React framework that offers you the satisfactory developer revel in with all of the capabilities you want for manufacturing: server-rendering, hybrid static, TypeScript aid, clever constructing, direction prefetching, and extra, with no configuration required.

Vercel is honestly dedicated to a thriving open web. With Next.js 11, the framework is faster and simpler to apply, but most significantly, raises the exceptional bar of your apps. The new subsequent.js model made authoring the internet real-time, collaborative and accessible to every person with a web browser.

Better Performance

One in every one of my preferred updates to Next.js is overall performance development, and it’s a magnificent gain to customers — truly stay up to date with Next.js releases, and you will see enhancement in number. Model 10, Next.js reviews as much as 24% faster startup time and 40% quicker processing time due to modifications via React fast Refresh. Your improvement talents must not change to enjoy these pace improvements.
This is yet some other development that benefits performance without builders having to modify a factor.

Script Optimization

Next.js launched a brand new sort of factor referred to as the Script component for optimization functions. It allows builders to set the loading priority of third–birthday celebration scripts to keep developer time and enhance loading overall performance.
Considering websites once in a while need to integrate with 0.33–celebration scripts like analytics, ads, and many others., we developers frequently war deciding where to locate the scripts in our application for the most reliable loading and proper execution.

beforeInteractive: Before the web page is interactive important scripts need to be retrieved (like consent control and bot detection).
afterInteractive: For scripts that could fetch and execute after the web page is interactive, along with tag managers and analytics.
lazyOnLoad: Scripts that can anticipate a required time to load, together with chat help and widgets of social media platforms.

Also, a word that the default script loading enjoys in Next.js 11 has been modified from async and preloading. 1/3–birthday celebration scripts regularly compete with better priority assets. This has been a daunting mission for builders to hold the right sequencing relative to these assets and different scripts.

Developers now have a stepped forward default for optimum performance by the usage of a Script component with a default loading method of afterInteractive, with beforeInteractive as an awesome alternative.

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

Conformance

Conformance is a time period used internally at Google. It’s far a system that gives cautiously crafted answers to support optimal UX.

From the revel in of the Google web platform team constructing massive-scale programs (you understand, like Maps, pix, and Google search), they have got proven that frameworks play a vital position in preserving application high-quality and overall performance. While a framework has a reliable machine of settings and protection, builders can attention to their application and merchandise, including functions and scaling.

The Google net platform group has started out exploring Conformance within the JavaScript framework surroundings, presently open-sourcing their gadget with Conformance for Next.js.

So now Next.js will be incorporating many best practices from Conformance which can be intended to assist developers by preserving matters in taking a look at performance, safety, accessibility, and many others, without the developer having to keep song of all of it.

For instance, subsequent.js now helps ESLint out of the field, so that you can trap next–unique problems for the duration of development. It enforces unit suggestions to your team to ensure great practices at some point of improvement and whilst you scale.

To use ESLint, run npx next lint after upgrading to Next.js 11.

Image development

In Next.js 11, new features had been brought to next/photo issues, decreasing cumulative format shift and growing a truthful visible enjoyment for the cease person.

Automated size Detection for Static pictures

Till now, the height and width props were required while rendering photographs using the photo element. These props allow Next.js to discover the scale of the photo and render a placeholder, fending off format shift, and a disorganized person interface.

//example 
<Image alt="Picture of Lion" src="/lion.png" width={700} height={475} />

//example 
import image from 'next/image' 
import profile-pic from '...profile-pic/samuel.png' 
export default function Profile() 
{ 
  return ( <Image src={profile-pic} alt="Profile Picture" /> ) 
}