In this article, you’ll learn about all the newly added features introduced to Next.js in version 11.
The team at Vercel recently introduced Next.js 11 at the Next.js Conference held on June 15. If you’re reading this article and you don’t know what Next.js is, Next.js is a React framework that gives you the best developer experience with all the features you need for production: server-rendering, hybrid static, TypeScript support, smart building, route prefetching and more, with no configuration required.
Vercel is really committed to a thriving open web. With Next.js 11, the framework is faster and easier to use, but most importantly, raises the quality bar of your apps. The new Next.js version made authoring the web real-time, collaborative and accessible to everyone with a web browser.
In this article, we will explore Next.js 11 and introduce all the newly added features. The 11th version includes seven features in general, which are:
next/script
)next/image
)@next/codemod
)Without further ado, let’s explore.
One of my favorite additions to Next.js is performance improvement, and it’s a passive benefit to users—simply stay up to date with Next.js releases, and your numbers will improve. For instance, since version 10, Next.js reports up to 24% faster startup time and 40% faster processing time because of changes through React Fast Refresh. Your development skills don’t have to change to enjoy these speed advancements.
Also, an update of the Babel loader for webpack optimizes loading and adds an in-memory config caching layer. This is yet another improvement that benefits performance without developers having to adjust a thing.
To make use of this feature, you have to keep your Next.js updated by running the following command:
npm i next@latest react@latest react-dom@latest
Next.js released a new type of component called Script Component for optimization purposes. It enables developers to set the loading priority of third-party scripts to save developer time and improve loading performance.
Since websites occasionally need to integrate with third-party scripts like analytics, ads, etc., we developers often struggle deciding where to place the scripts in our application for optimal loading and proper execution.
So with next/script
, you can set the priority of script through the prop strategy
while Next.js will automatically prioritize them to improve loading performance.
The Script component comes with three modes:
beforeInteractive
: For critical scripts that need to be retrieved and executed before the page is interactive, like bot detection and consent management.afterInteractive
: For scripts that can fetch and execute after the page is interactive, such as tag managers and analytics.lazyOnLoad
: For scripts that can wait for an idle time to load, such as chat support and social media widgets.<Script
src="your address"
strategy="beforeInteractive" // lazyOnload, afterInteractive
/>
We can also run the 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, note that the default script loading experience in Next.js 11 has been changed from preloading and async
to defer
. Third-party scripts often compete with higher priority resources. This has been a daunting task for developers to maintain the proper sequencing relative to these resources and other scripts.
Developers now have an improved default for optimal performance by using a Script Component with a default loading strategy of afterInteractive
, with beforeInteractive
as a good alternative.
Read the RFC and challenges with preload from the Google Chrome team to learn more about the technical choices behind switching the default.
In Next.js version 11.0, new features were introduced to next/image
component, reducing Cumulative Layout Shift and creating a straightforward visual experience for the end user.
Automatic Size Detection for Static Images
Until now, the height and width props were required when rendering images using the image component. These props allow Next.js to identify the size of the image and render a placeholder, averting layout shift and a disorganized user interface.
<Image
alt="My Picture"
src="/david.png"
width={700}
height={475}
/>
Now you don’t need to set your height and weight props apart because Next.js 11 provides support for import
keywords for image src to automatically define width and height for static images.
import image from 'next/image'
import profile from '...profile/david.png'
export default function Profile() {
return (
// When importing the image as the source,
// you don't need to define `width` and `height`,.
<Image src={profile} alt="Profile Picture" />
)
}
Image Placeholders
Also, the next/image
component in Next.js 11 now supports a new blur-up placeholder prop that sets the value to blur on slower internet connections. It will enable the next/image
component to display blurred and low-resolution images while the initial image is loading.
Add a placeholder="blur"
to your image to use the blurred placeholders.
<Image
src={image}
alt="My picture"
placeholder="blur"
/>
The image component will display the blurred image for a few seconds before the initial image finally loads.
Next.js 11 also supports blurring dynamic images by using the custom blurDataURL
prop, which is provided by your backend in your Image tag. You can generate the custom blurDataURL
using an application like blurha.sh on the server.
<Image
src="your image sources"
blurDataURL="the url to your custom image"
alt="My picture" placeholder="blur"
/>
Firstly, let’s take a look at: what is Conformance? According to the Google web platform teams, Conformance is a term used internally at Google. It is a system that provides carefully crafted solutions to support optimal UX.
From the experience of the Google web platform team building large-scale applications (you know, like Maps, Photos and Google Search), they have proven that frameworks play an essential role in maintaining application quality and performance. When a framework has a reliable system of settings and security, developers can focus on their application and products, on adding features and scaling.
The Google web platform team has started exploring Conformance in the JavaScript framework ecosystem, currently open-sourcing their system with Conformance for Next.js.
So now Next.js will be incorporating many best practices from Conformance that are meant to support developers by keeping things in check—like performance, security, accessibility, etc.—without the developer having to keep track of it all.
For instance, Next.js now supports ESLint out of the box, so you can catch Next-specific issues during development. It enforces and sets guidelines for your team to ensure best practices throughout development and even as you scale.
ESLint integration works for new and existing Next.js applications. To use ESLint, run npx next lint
after upgrading to Next.js 11.
Next.js 10.2 previously announced the support for webpack 5 without a custom webpack configuration in next.config.js
. From version 11 onwards, webpack 5 is now the default for all Next.js applications. Your newly built Next.js application will come with all the optimization and features of webpack 5. However, if your previous application has a custom configuration, I recommend following this upgrade for documentation for webpack 5.
The Vercel team also introduced a new tool called @next/codemod
that automatically converts Create React App applications to be Next.js-compatible.
CRA migration is one of my favorite features because it helps developers convert CRA applications to Next.js out of the box. It automatically adds a pages/
directory and moves CSS imports to the proper directory. You can also incrementally adopt Next.js while maintaining the functionality of the existing CRA project.
To migrate your previous Create App project, use the command below:
npx @next/codemod cra-to-next
Although note that this feature is currently experimental.
Next.js Live is definitely one of the essential features of Next.js 11. The mission of Vercel is to make development more enjoyable and more inclusive. They have introduced technologies like ServiceWorker, WebAssembly and ES Modules to provide a collaborative development environment right inside the browser.
With this Live feature, developers can collaborate immediately by sharing a URL without a build step. Isn’t this amazing? It means you can do real-time peer programming and editing within the browser and get feedback instantly.
Note that the live feature is currently running under early access.
I hope you enjoyed reading through this article. I’m very excited about the new and incredible features of Next.js 11.
Starting from Conformance, a system that provides a conscientious environment to support optimal user experience, to improvement in performance that betters startup time; with other features to enhance loading of images and scripts, and the ability to collaboratively code in the browser with the Live Feature—indeed the Next.js team is really on a mission to create the best developer experience.
I like what the Vercel team is doing and the trajectory they are taking Next.js on.
You can give it a try or upgrade your previous project to version 11, and let me know your opinion in the comment section.
David Adeneye is a software developer and a technical writer passionate about making the web accessible for everyone. When he is not writing code or creating technical content, he spends time researching about how to design and develop good software products.