Next.js 11: Scripts, Images, and Built-in Guardrails
Next.js 11, announced at the Next.js Conf Special Edition, focuses on improving both end-user experience and developer workflow. The release introduces a new Script component that gives developers more control over third-party script loading, with the goal of improving page performance. The component works alongside existing Image component updates, which now include automatic size detection and support for blur-up placeholders. These changes aim to reduce Cumulative Layout Shift, a metric tracked as a Core Web Vital.
"Images are often the largest part of web pages, especially in eCommerce. The Community has done a great job improving the Next.js image component since it was released in October. Our focus has been on automating best practices and optimizing for each device viewport the image is delivered to."
Lydia Hallie, Software Engineer
The image, script, and font optimizations in Next.js 11 were developed in collaboration with the Google Chrome team and are based on performance research. More details are available on the Next.js blog.
Conformance: Framework-Level Quality Defaults
A separate announcement, made jointly with Google's Aurora team, introduces Conformance for Next.js. Conformance describes a set of guardrails and defaults embedded in the framework to help developers make better decisions about performance and maintain consistent quality at scale. The principle is that the framework should shoulder the burden of enforcing good practices, rather than placing that responsibility on individual developers.
"The most important thing I've learned is that for developers to achieve and maintain the best app quality, the framework must participate and do the heavy lifting. At Google, we shifted the hard work away from developers and into the framework. This means every developer using the framework has all the solutions baked into every project they work on."
Shubhie Panicker, Google Chrome
Additional information about these foundational optimizations can be found in the Next.js 11 release notes.
Next.js Live: Browser-Based Real-Time Collaboration
The conference also included a preview release of Next.js Live, a tool that brings the development environment into the browser. It is designed to enable real-time collaboration by providing shared URLs for teams to chat, draw, and edit code together without complex setup. Because the entire process runs in the browser, collaborators can see code changes reflected instantly without needing a separate redeployment step.
The tool is available to preview on the Next.js Commerce template.
The full Special Edition keynote, including demos of Next.js 11 and Next.js Live, is available to watch. A full Next.js Conf experience is planned for later this year, coinciding with the project's fifth anniversary.
