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.
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.
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.
- 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.”