Vercel CEO Guillermo Rauch

Next.js 10 Improves Open Source Front-End Framework Performance

The widely deployed open source Next.js JavaScript framework integrates image optimization and performance analytics to boost web performance.

A major new release of the Next.js open source, front-end JavaScript web application framework launched on Oct. 27, providing image optimization, performance, analytics and enhanced internationalization capabilities.

Next.js 10 was announced at the Next.js virtual conference, hosted by Vercel, which is one of the lead commercial vendors contributing to Next.js development efforts. Next.js is among the most popular open source web application frameworks and is based on the React JavaScript library for developing user interfaces. The creator of Next.js, Guillermo Rauch (pictured), is also the CEO of Vercel.

"Almost exactly four years ago today, Next.js was introduced on the cusp of the React revolution," Rauch said during the opening keynote address at the Next.js conference. "React was invented to build components, but at the time we wanted to build full pages; we didn't want to mess around with libraries and bundlers and configuration—we wanted an entire solution."

The main focus of Next.js since its inception has been to create the best way to develop, preview and ship pages to the open web, according to Rauch. Among the companies that have embraced the Next.js model are well-known brands including Apple, TikTok, Twitch, Lyft, Hulu and Target, he said.

Next.js 10 Brings Image Optimization

Among the key enhancements in Next.js 10 is the new Image Component, which was added to optimize image delivery in web applications.

On average, images will make up 50% of the average web page's size, Rauch said. "When left unoptimized, images will hurt your site's performance and consequently your user experience—Next.js 10 solves this," he added.

Tim Neutkens, head of Next.js at Vercel, said that at its most basic, the new Next.js Image Component is just a drop-in replacement for the HTML image element—but evolved for the modern web.

"When using the Next.js Image Component, images are automatically lazy-loaded,

meaning they're only rendered when the user is close to seeing the image," Neutkens said. "And by enforcing image dimensions, browsers immediately render the space needed for the image instead of having it jump in when loaded."

Another challenge that Next.js is tackling is that of image optimization and making sure the right-sized image is delivered for the user's screen. Neutkens said the Next.js Image Component will automatically generate the right sizes, serving users smaller images in modern web formats like WebP, which is about 30% smaller than JPEG.

Web Vitals Help Performance Monitoring

Another key addition to Next.js 10 is the integration of a built-in analytics capability for performance monitoring. The Next.js Analytics module helps track a set of metrics known as Web Vitals.

"Web Vitals are the metrics that track the perceived loading speed, responsiveness and visual stability of your website," said Joe Haddad, senior software engineer at Vercel.

Perceived loading speed is the amount of time it takes for a page's main elements to be displayed on screen, Haddad said. Page responsiveness can be measured by the amount of time that elapses between a user clicking on a page and seeing the reaction of that input. Finally, visual stability is measured by how often elements move after being displayed to the user.

"Every time you deploy, you'll automatically receive actionable performance scoring," Haddad said.

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish