Next.js 13 with a vision: “Dynamic without Limits”

The Next.js development process was spearheaded by several developers, including Meta, Google, and the Vercel team, who came together into a mammoth collaboration. Vercel, one of the popular frontend developers committed to the cloud platform, joined hands with the creators of this React framework to introduce Next.js 13. This announcement was made at the Next.js conference held on October 25.

During the announcement, the founder and CEO of Vercel, Guillermo Rauch, stressed the platform's goal and affirmed that “Our goal at Vercel is to make the Web faster by giving developers the tooling they need to build experiences users love. We’re taking the lessons of giants and making them available to anyone building on the Web.”

Let’s get some insight into its newly added features.

The newly introduced app/ directory for smoother page routing, bug fixing, and more

Theappdirectory (beta version) is one of the noteworthy features that users can access in Next.js 13. This directory is an updated version of the native page routing system of Next.js. The folder contains a few unique files that users can access for their application’s creative UIs and states. They can use the error.tsx file to eliminate errors and store them in an isolated part of the application.

Further, the directory supports React’s server components, layouts, and streaming. Most importantly, it will consider the components present inside the app directory as the default server components.

Use of async/await to fetch data faster

Users can experience a more straightforward data fetching process with the fetch() native Web API method. It enables users to consider JavaScript async/awaitsyntax to retrieve data asynchronously in server components. It provides performance benefits like data re-validation and automatic caching. It includes a usehook, using which users can unwrap Promise values. They can use this hook within core hooks, core components, and even on top of the client.

Note that this approach to fetching data is similar to that of the React-only version.

Font optimization with next/font

Next.js 13 comes with a font module, named next/font. It is an automated process that optimizes users' Google and local fonts for better performance and further restricts layout shifts with the CSS size-modifying features.

Along with the other static assets, users can download font and CSS files simultaneously at the same build time. During the process, the browser sends no requests to Google.

Introducing next/image and next/link components for an enhanced UI/UX

The next/image and next/link components of Next.js were updated in Next.js 13. Users can access new performance improvements in next/image components like faster load times of images, the alt attribute for smoother accessibility, and less client-side JS.

Moreover, the next/link Next.js component, which was earlier used for client-side progressions, now has a default <a> element. This makes the work of users much easier in the sense that now, they don't have to add <a> annually as they used to do before.

Introducing Turbopack, a successor to Webpack

With Next.js 13, users can utilize the Rust-based native compiler. Turbopack takes hardly 1.8 seconds to reboot. It is much faster than the startup timing of Webpack. Further, in terms of updates, Turbopack is 700 times faster than Webpack and 10 times faster than Vite.

Developers can only use the version of Turbopack alpha supported in development mode.

OGIG (Open Graph Image Generation) with @vercel/og

Now, developers can also access a library in Next.js 13, named Next.js 13 @vercel/og. Using the Open Graph Protocol improves the creation of images used in social media. The ImageResponse function in the library forms a dynamic image that users can use in their <meta> tags.

TL;DR

Similar to React, Next.js is better in the sense that it provides all of React's features with easier applicability and a robust client-server stack. On that note, Next.js 13 delivers a bundler, Turbopack, as well as support for React-based optimizations such as streaming rendering and React Server Components.

Overall, Next.js 13 is a major accomplishment, integrating features from React and Next, and facilitating a functional developer experience.