Cross-platform innovations highlighted by Vercel and Google to audience of more than 50,000 attendees
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, 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.
Recommended ITech News: Wipro Named a Worldwide SAP Supply Chain Ecosystem Leader by IDC MarketScape
“At Google Chrome, we believe our collaboration with Next.js is an example of how to set predictable outcomes for loading performance”
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%.
Recommended ITech News: Syniverse and AlefEdge Combine to Support Enterprises in Creating Their Own 5G Edge Networks
“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.
Recommended ITech News: Aurora Multimedia Corp. Launches New Av-over-ip Solution With Semtech’s Blueriver Platform
- 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.
Recommended ITech News: Copado Delivers the First Multi-Cloud DevOps Platform for Enterprise SAAS With Its Summer 21 Release
- 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.”
Recommended ITech News: SmartBear Expands API Design Enabling Developers to Work in Popular Java IDE
