Next.js 13 hones routing, layouts, rendering

Next.js 13, the latest version of Vercel’s React framework for building web applications, adds a pre-release version of a faster bundler as well as a redesigned approach to server rendering, routing, layouts, and data fetching.

With Next.js 13, introduced October 25, the Turbopack bundler, written in Rust and still in an alpha stage of development, is positioned as a successor to Webpack.

Offering improved speed and a better architecture, Turbopack is a build system for JavaScript and TypeScript that is designed for incremental builds. Turbopack is 700 times faster than Webpack when working with large applications, Vercel said.

Next.js 13 also features a beta of app/Directory, an enhancement of the framework’s filesystem-based routing system intended to make it easy to lay out complex interfaces and maintain state across navigations while avoiding expensive re-renders. Layouts can be defined through the file system.

In addition, app/Directory provides a way to fetch data built on top of React Suspense for Data Fetching, and it introduces support for the React Server Component architecture.

React Server Components provide a way of defining components that can have data requirements attached to them and by default have no client impact. This improves performance, particularly for mobile applications, Vercel CEO Guillermo Rauch said.

Next.js users can update to version 13 by running the following:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Also in Next.js 13:

• A new font system automatically optimises fonts, including custom fonts, and removes external network requests, for improved performance and privacy. The font system also has built-in self-hosting of any font file and a zero layout shift that automatically uses the CSS size-adjust property.
• An image component is introduced to display images without layout shift. The component optimises file on demand for better performance and enables shipping of less client-side JavaScript.
• A library, @vercel/og, has been created to work with Next.js to create social cards, which are open graph images.
• The minimum React version has been bumped from 17.0.2 to 18.20, while the minimum Node.js version now is 14.0.0.

Although Next.js could be seen as a competitor to Google’s Angular web framework, Next.js nonetheless has an advocate at Google: Kelsey Hightower, Google distinguished engineer and a technical advisor to Vercel, who participated in this week’s Next.js Conf 22 conference in San Francisco.

“The biggest difference I’ve seen between the two is, Next.js actually calls out that tiered computation problem,” Hightower said. While a lot of front-end frameworks are designed for what can be done on the client side, Next.js provides a CDN (content delivery network) component; computation can be run on the CDN, one layer below the browser.

But Hightower was not ready to declare Next.js outright superior to Angular. “It’s like saying, is iOS better than Android? You can try to make that comparison.”