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.
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.
@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.
Copyright © 2022 IDG Communications, Inc.