The best new features in Next.js 13
A new version of Next.js 13 adds a number of new features, including Turbopack bundlers, React Server Component support, and more. Here’s how Next.js 13 works.
What is Next.js
Besides delivering all the features of React, Next.js also provides an easy-to-use interface and a very defined client-server stack. During the Next.js conference in October 2022, Vercel released Next.js 13 as the newest version. The package adds a number of new features, including a bundler called Turbopack and support for a number of React-incubated optimizations.
In summary, Next.js 13 presents a pleasantly usable developer experience that combines advances in React and Next itself. Additionally, this release includes considerable optimizations behind the scenes. Check out Next.js 13’s new features.
Next.js Turbopack bundler
In addition to Turbopack, Turborepo is also available
Turbopack is Turborepo’s sibling in the Vercel universe. Vercel’s front-end tooling is built on these two cornerstones and their combined efforts make it the cornerstone of its systems-oriented approach. Bundling is done with Turbopack, and monorepo is done with Turborepo.
Turbopack is written in Rust, which seems to be the dominant language in software development these days. One of the reasons Turborepo performs better than other build tools is Rust’s inherent speed. As a successor to Webpack, the Vite build tool has been gaining mindshare in the bundler space lately (Rust is like C++, but with better memory safety). A language similar to Rust, Go, is used in Vite. However, Rust seems to have the advantage when it comes to efficiency.
The architecture of Turbopack has also been changed, including the clever use of caching to handle source changes more efficiently. A Turbopack build only takes into account changes that are required to reflect ongoing changes, based on a detailed model of the changes that have already been built.
/app is a new directory
We will see a new /app directory in our directory layout now. Next.js 13 introduces this new feature. React and Next.js’ next generation features are basically all in the /app directory.
As an extension of the familiar /pages directory, the /app directory supports more advanced routing and layout features. In this way, you can gradually replace existing routes with routes that match both /pages and /app.
If you want to use the /app directory, you must enable experimental features in next.config.js
New Layouts in Next.js 13
The advantage of /app over /pages is that it supports complex nested layouts. You can define a layout for every branch in your URL hierarchy that will be shared with its children (aka leaf nodes). Additionally, the layouts save their state between transitions, so content in shared panels doesn’t need to be re-rendered.
Pages in a directory are defined by page.tsx/jsx files, while subdirectories’ layout.tsx/jsx files define the template. This simplifies the process of creating nested templates. Furthermore, the framework is smart enough to not re-render sections of the page that do not change, so navigation won’t repaint layouts that aren’t changed.
Components for React Server
Whenever you use client-side hooks, such as useState or useEffect (where the server cannot perform any work beforehand), you should tell React that it’s a client-side component. The first line of the file should contain the ‘use client’ directive. Prior to now, client components were identified by the .client.js and .server.js filename extensions, but now you must make use of the ‘use client’ directive at the head of your /app components file.
The new concurrent render engine also enables streaming in React. In terms of how React works, it’s a fundamental change. Sections can be defined in the UI according to their dependencies, and sections that require data can load the data concurrently while defining their loading states. As for sections without data dependencies, they can receive their content right away and display it immediately.
Particularly with mobile devices, these benefits are more pronounced when the network is unreliable or slow. Both users and developers will benefit from this new feature. There will be a noticeable improvement in how data is fetched by developers. The default is to adopt best practices, as they are not only simpler, but also more cost-effective.
Loading conventions have changed
As of Next.js 13, loading.js has a new convention. This file resides in the /app/routes directory and acts as a suspense for the entire route. Next.js applies a suspense boundary under the hood. This allows the content and suspense to run simultaneously even while loading.js is running.
Next.js 13 improves data fetching
A newer approach to data fetching replaces the deprecated Next.js methods (getServerSideProps, getStaticProps, and getInitialProps).
As a result of all components being server components by default, the first convention is to load data on the server. By doing this, you avoid having to bounce client data requests off the server, when you can simply send the rendered UI directly to the client. For a more detailed explanation of why server-side data fetching is preferred, see the Next.js documentation.
Streaming and suspense are required when fetching data in the /app directory. It is advisable for components to request data directly rather than relying on their parents to pass it to them – even if that data is shared among components. In addition to avoiding redundant requests, the framework will ensure that only the minimal requests are made and passed on to the right components. Results will also be cached so they can be reused later.
In addition to simplifying the architecture, it still optimizes data fetching. Rather than worrying about data fetching performance, developers can grab data as they need it in the component that needs it.
We are familiar with the asynchronous Fetch API, and this new approach allows you to use it directly in server components. It is also possible to define async server components; for example, export the default async function Page(). (React and Next extend the API to handle deduplication and caching.) You can also define async server components.
In Next.js 13, there are a lot of things going on-and I’ve barely touched the surface. Additionally, the next/image component has been updated and a new font-loading system has been added. Despite its relatively small size, Next.js 13 continues to offer a React-with-benefits framework that simplifies a variety of tasks.
The server and streaming components are long-term innovations in this release. By combining Next.js 13 with Vercel’s infrastructure, we get a glimpse of the future of reactive development.