Next.js 11 Accelerates Frontend Performance and Enables Instant Collaboration to Let Developers Build the Next Big Thing, Faster

Cross-platform innovations highlighted by Vercel and Google to audience of more than 50,000 attendees

SAN FRANCISCO--(BUSINESS WIRE)--NEXT.JS CONF -- Vercel, a comprehensive platform for creating unsurpassed web user experiences and creator of Next.js, the leading React and JavaScript framework for frontend web development, today announced Next.js 11, accelerating frontend developers’ ability to build the next big thing through speed and collaboration. New innovations include significantly faster starts and changes, real-time feedback, instantaneous live collaboration and significant image optimization enhancements. In addition, the Aurora team in Google Chrome developed Conformance for Next.js, a system that provides carefully crafted solutions and rules to support optimal loading; Next.js script prioritization and font enhancement automations that reduce First and Largest Contentful Paint times. Together, these enhancements enable developers to improve Core Web Vitals scores, which are now being used by Google to influence search rankings. Developers can try these new capabilities by visiting nextjs.org/11.

Next.js is the first hybrid framework to succeed at scale, and the only one to meet the needs of both static and dynamic websites and applications. Leveraging React as the fundamental unit of collaboration gives developers at companies including TikTok, Hulu, Ticketmaster, Staples and Marvel the flexibility to scale from one page to one billion pages.

Since the first Next.js Conf in October 2020, Next.js open-source contributors have grown to more than 1,600, driving downloads on NPM from 4.1M to 6.2M. Traffic to all sites and apps on the Vercel edge network has doubled, weekly deploys have quadrupled and the number of homepages in the Alexa top 10,000 using Next.js have grown by 50%.

“Whether you're starting with a single static page or deploying a dynamic site with billions of pages, Next.js is the hybrid framework that meets you where you are and grows with you,” said Vercel CEO Guillermo Rauch. “We believe the fastest and most enjoyable end-user experience must go hand in hand with the fastest and most enjoyable developer experience."

New Innovations in Next.js 11 Include:

• The Fastest Frontend Platform Ever -- Next.js innovations improve startup time by up to 24% and reduce processing time for changes from edit to screen by 40%.
• Next.js Live (Preview Release) -- Combining a brand new dev server engine for Next.js with the Vercel platform enables teams to instantly share, chat, draw, and edit from anywhere in the world, with developers able to generate a URL in less than five seconds. With support for both static and dynamic Next.js applications, sharing and accessing a URL is always instantaneous, regardless of page numbers, because there's no build process involved. Next.js will run entirely inside the web browser. Leveraging ServiceWorker, WebAssembly and ES Modules makes everything that's possible when you run Next.js on a local machine possible in the context of a remote collaboration. Next.js Live works perfectly, even when offline, eliminating the need to run or operate remote virtual machines.
• Real-time Feedback -- Vercel enables developers to see the reaction to changes instantly. A priority in Next.js since day one, the new functionality builds on support for webpack HMR with zero configuration, and on the close partnership with Facebook, which led to the development of the Fast Refresh innovation in Next.js. Now developers can run the next dev command and their frontend project is ready to go. The browser reflects changes as soon as a file is saved. This not only works for styles, but thanks to Fast Refresh, all state is preserved even as changes are made.
• Industry-first Image Enhancements -- Next.js lets developers quickly swap the HTML image tag for the Next.js image component, optimizing images for each device viewport the image is delivered to. Lighthouse tests provide insights for improving loading performance out of the box in development when running Next Start, or when deploying to Vercel via its blazing fast edge network. Close community-driven integration with Cloudinary, Cloudflare, Akamai, and Imgix extend those benefits to the leading third-party content networks. New enhancements include support for the import keyword for the src, which can be used to refer to essential images that are part of a repository and automatically setting width and height parameters for local images, reducing cumulative layout shift, a core web vital. It also provides support for image placeholders on imported images, easing the transition from blank space to image, in addition to support for blurring for dynamic images.
• Conformance for Next.js -- This new system provides carefully crafted solutions and rules to support optimal loading. It frees developers from having to memorize complicated rules for loading performance via a compiler that enforces best practices to ensure predictable outcomes. This makes teams productive, and becomes essential as teams grow and features increase.
• Next.js Script Component -- This foundational optimization enables developers to set the loading priority of third-party scripts, significantly improving loading performance. Developers can now simply define the strategy property and Next.js will prioritize it. It enables three different loading strategies -- before-interactive, for critical scripts such as security and authentication that need to be fetched and executed before the page is interactive; after-interactive, for scripts such as tag managers and analytics that can fetch and execute after the page is interactive; and lazy-onload, for scripts such as chat support widgets that can wait to load last during idle time.
• Font Enhancement Automations -- More than 80% of web pages are using custom web fonts as part of their branding, design, or to maintain cross-browser and device consistency. That customization exacts a performance toll. In April, Google introduced Font Optimization that includes Google Fonts and Adobe Typekit on Next.js, along with Font Optimization for Angular for Google Fonts. In Next.js, the CSS of custom fonts is now automatically inlined at build time. This eliminates the round trip to fetch font declarations, improving both First and Largest Contentful Paint times by as much as five seconds. A preconnect tag in Next.js, by default, establishes a connection with the underlying font files even faster.

“At Google Chrome, we believe our collaboration with Next.js is an example of how to set predictable outcomes for loading performance,” said Houssein Djirdeh, developer advocate at Google. “We love working together with great frameworks to help developers make the web faster and we're incredibly grateful for the maintainers and sponsors of the frameworks that enable the web to thrive. A special thanks to the Next.js team for testing with us and sharing the cost of many early attempts.”

About Vercel

Vercel is the leading advocate and enabler of frontend developer experience, having created the best platform to deploy any frontend website or application and Next.js, the most popular React framework. Vercel provides unsurpassed vertical integration, from developer experience to edge delivery, with the industry’s most advanced development tools paired with parallel compute in a serverless cloud environment providing a fully-managed, highly-automated experience for both developers and users. Companies including Carhartt, Github, Hulu, IBM, McDonald’s, Uber and Facebook deploy their frontends with the Vercel platform. Vercel (twitter @vercel) is headquartered in San Francisco.