Next.js 13 Accelerates JavaScript Performance, Image Handling

The open source Next.js JavaScript framework is getting a significant upgrade to accelerate front-end web performance and image handling.

Vercel announced Next.js 13 at its Next.js conference on Oct. 25. The Next.js framework is widely used on the web today and makes use of the React JavaScript library to help build user interfaces. 

Among the new features added in Next.js 13 are image ones that enable developers to integrate custom fonts and typefaces into web pages more easily. Also implemented is a new routing and rendering infrastructure that aims to accelerate the delivery of web design.

While JavaScript remains the foundation of Next.js, Version 13 also has components written in other languages. The new Turbopack build system for JavaScript that is being previewed alongside Next.js 13 was written in the open source Rust programming language and delivers significant performance gains.

Rauch

"Each year, more of the top applications in the web are built with Next.js, particularly in retail, SaaS [software as a service], and media, drawn by its balance between great developer experience and great end-user performance," Guillermo Rauch, creator of Next.js and CEO of Vercel, said in his keynote at Next.js Conf 2022.

Turbopack Uses Rust to Accelerate Next.js JavaScript Performance

For the last decade, one of the primary ways of bundling JavaScript modules together has been with the open source Webpack technology.

"While Webpack has allowed JavaScript to go from sprinkling interactivity on a page to building entire web applications with just JavaScript, it's time for a major upgrade, " Rauch said.

The major upgrade is the Turbopack bundler, which Vercel is building in the Rust programming language. Turbopack is faster than Webpack thanks to its highly optimized machine code and low-level incremental engine, Lee Robinson, vice president of developer experience at Vercel, explained. However, Turbopack is not yet a full replacement for Webpack, as it's only an alpha release and more capabilities will still be added.

Next.js 13 Image Handling Improvements

A big area of improvement in Next.js13 is in how it handles images. Image handling has been an area of focus for Next.js for many years, with the Next.js 10 release in 2020 having a series of enhancements in that area.

"The introduction of the Next.js image component in Version 10 was a crucial step in the right direction," Lydia Hallie, staff developer advocate with Vercel, said. "When we surveyed the Next.js community, 70% of respondents told us that they use the Next.js image component in production."

With Version 13, Next.js is providing a substantial update to the image component both in terms of performance and developer experience. Hallie said that the new image component uses less client-side JavaScript that performs better.

The ability to use custom fonts more easily is another area of image improvement. In the past, websites that wanted to use custom fonts had to reach out to external services to load the fonts, which could impact performance.

"We're reimagining how developers use fonts with a brand new font system developed in collaboration with the [Google] Chrome team," Hallie said. "This built-in module not only optimizes your fonts, but also removes any external network requests for improved privacy and performance."