The open source Next.js JavaScript framework gets a major upgrade for faster front-end web performance and image processing.
Versel announced Next.js 13 at the Next.js conference on October 25th.
Among the new features added in Next.js 13 is an image feature that allows developers to more easily integrate custom fonts and typefaces into web pages. It also implements a new routing and rendering infrastructure aimed at accelerating the delivery of web designs.
JavaScript continues to be the foundation of Next.js, but version 13 also has components written in other languages. The new Turbopack build system for JavaScript, previewed with Next.js 13, is written in the open source Rust programming language and offers significant performance improvements.
At Next.js Conf 2022, Vercel CEO Guillermo Rauch explained what’s new in Next.js 13.
“Every year, many of the web’s top applications are built with Next.js, especially in retail and SaaS. [software as a service]and the media are drawn to the balance between a great developer experience and great end-user performance,” said Guillermo Rauch, Next.js creator and Vercel CEO, during his Next.js Conf 2022 keynote. said in
Turbopack uses Rust to accelerate Next.js JavaScript performance
Over the past decade, one of the primary ways to bundle JavaScript modules has been with the open source Webpack technology.
“Webpack has taken us from using JavaScript to add interactivity to pages to building entire web applications entirely in JavaScript, but now is the time for a major upgrade,” said Rauch. said.
The major upgrade is the Turbopack bundler that Vercel is building. Rust programming languageTurbopack is faster than Webpack, thanks to highly optimized machine code and a low-level incremental engine, explains Lee Robinson, vice president of developer experience at Vercel. However, Turbopack is not yet a complete replacement for Webpack. This is only an alpha release, with more features to come.
Next.js 13 Improving Image Processing
A big improvement in Next.js13 is how images are handled. Image processing has been a focus area for Next.js for many years. Next.js 10 release 2020 brings a series of enhancements in that area.
“The introduction of Next.js image components in version 10 was an important step in the right direction,” said Lydia Hallie, Staff Developer Advocate at Vercel. Said. “When we surveyed the Next.js community, 70% of her respondents said that in production they were using components of her Next.js image.”
With version 13, Next.js offers significant updates to the Image component, both in terms of performance and developer experience. According to Hallie, the new image component uses less client-side JavaScript and has better performance.
Being able to use custom fonts more easily is another area of image improvement. In the past, websites that wanted to use custom fonts had to access external services to load the fonts, which could impact performance.
“We are rethinking how developers use fonts. [Google] Chrome team,” said Hallie. “This built-in module not only optimizes fonts, but also removes all external network requests for improved privacy and performance.”
About the author
Sean Michael Kerner is an IT consultant, tech enthusiast, and tinkerer. He consults industry and media organizations on technology issues.
