Next.js 13 folders routing, layouts, rendering

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

With Next.js 13, introduced on October 25, the Turbopack bundler, written in Rust and still in the alpha phase of development, is positioned as the successor to Webpack. Offering improved speed and better architecture, Turbopack is a build system for JavaScript and TypeScript designed for incremental builds. Turbopack is 700 times faster than Webpack when working with large applications, Vercel said.

Next.js 13 also has a beta version of app/Directory, an enhancement to the framework’s filesystem-based routing system intended to make it easier to layout complex interfaces and maintain state across navigations while avoiding costly re-renders. Layouts can be defined through the file system. In addition, app/Directory provides a way to recover data built on top of React Suspense for data recovery, and it introduces support for the React Server Component architecture.

React server components provide a way to define components that can have data requirements attached to them that, by default, have no impact on the client. This improves performance, especially for mobile apps, said Vercel CEO Guillermo Rauch.

Next.js users can upgrade 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 optimizes fonts, including custom fonts, and suppresses external network requests, for improved performance and privacy. The font system also has built-in auto-hosting of any font file and zero layout offset that automatically uses the CSS size adjustment property.
• An image component is introduced to display images without layout shift. The component optimizes File on Demand for better performance and allows less client-side JavaScript to be sent.
• Library, @vercel/ogwas created to work with Next.js to create social maps, which are open graphical images.
• The minimum React version has increased from 17.0.2 to 18.20, while the minimum Node.js version is now 14.0.0.

Although Next.js can be considered a competitor of Google Angular Web FrameworkNext.js does, however, have an advocate at Google: Kelsey Hightower, a distinguished Google engineer and technical adviser to Vercel, who attended the Next.js Conf 22 conference in San Francisco this week.

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

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