Home Web development Vercel releases Next.js 13 to speed up web development

Vercel releases Next.js 13 to speed up web development


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

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

Among the new features added in Next.js 13 are those that make it easier for developers to embed fonts and custom fonts into web pages. A new routing and rendering infrastructure has also been implemented to speed up web design delivery.

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’s being previewed with Next.js 13 was written in the open-source Rust programming language and offers significant performance gains.

During the Next.js Conf 2022, the CEO of Vercel, Guillermo Rauch, presented the new features of Next.js 13.

“Every year more and more of the web’s best applications are built with Next.js, especially in retail, SaaS [software as a service]and the media, attracted by its balance between an excellent developer experience and excellent end-user performance,” said Guillermo Rauch, creator of Next.js and CEO of Vercel, in his keynote at Next. .js Conf 2022.

Turbopack uses Rust to speed up Next.js JavaScript performance

For the past decade, one of the primary means of bundling JavaScript modules has been the open source Webpack technology.

“While Webpack has taken JavaScript 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 grouper, which Vercel builds in the Rust programming language. Turbopack is faster than Webpack thanks to its highly optimized machine code and low-level incremental engine, explained Lee Robinson, vice president of developer experience at Vercel. However, Turbopack is not a full Webpack replacement yet, as it is only an alpha version and more features 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 management has been an area of ​​focus for Next.js for many years, with the Version Next.js 10 in 2020 with a series of improvements in this area.

“Introducing the Next.js image component in version 10 was a crucial step in the right direction,” Lydia Hallie, developer attorney at Vercel, said. “When we surveyed the Next.js community, 70% of respondents told us they were using the Next.js image component in production.”

With version 13, Next.js provides a substantial update to the image component both in terms of performance and development experience. Hallie said the new image component uses less client-side JavaScript which works better.

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

“We’re reinventing the way developers use fonts with an all-new font system developed in collaboration with the [Google] The 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.”

About the Author

    Portrait of Sean Michael KernerSean Michael Kerner is an IT consultant, tech enthusiast, and handyman. He consults for industry and media organizations on technology issues.