Next.js made their new release candidate available on May 23rd, 2024. This release includes a number of new features and improvements, as well as bug fixes and performance enhancements. This post will provide an overview of the new features in this release.

React 19 Support

As you may already know React is being busy with their own release candidate in which they provide features for the client but also for the server like Actions. This means that we will be able to use the new features in the next release of Next.js.

Want to know more about what is in this release candidate I advise to watch React Conf

Hydration errors

One of the most personally great improvements Next.js 15 will bring is the improvements made to the Hydration Errors, where in previous it was sometimes hard to understand what was going on. Now you will get a more detailed error message that will help you to fix the issue.

For example where an error was displayed as:

This error will now be displayed as:

Caching improvements

Another improvement that I am excited about is that the default caching for fetch requests, GET Route Handlers, and Client Router Cache from cached by default to uncached by default. This will provide more flexibility for the developer and will allow them to choose what they want to cached and what not. Which will lead ultimately to a better user experience.

Experimental features

With the above improvements there are also a few experimental features that will be available in the next release of Next.js. These features are still in development so keep this in mind when you are using them.

Next after

Executing code that is not really needed for a response often results in impact for the response time. This is because the code is executed on the server and the response is sent to the client. With the next after feature you can execute code after the response is sent to the client. This will allow you to do things like:

• Logging for example towards sentry
• Sending data to an analytics service

You can read more about this feature and how to enable it in the Next.js documentation.

Partial rerendering

In Next.js 14 the Partial rerendering(PPR) optimization was already introduced. This optimization is a way to improve the performance of your application by only rerendering the parts of the page that have changed. With PPR, you can wrap any dynamic UI in a Suspense boundary. When a new request comes in, Next.js will immediately serve a static HTML shell, then render and stream the dynamic parts in the same HTTP request.

To allow incremental adoption a new route config option has been introduced namely: experimental_ppr which you need to set to true in order to enable this feature. You’ll also need to set the experimental.ppr config in your next.config.js file to 'incremental'. This will allow you to use the new Suspense boundary in your application.

For example:

// app/page.tsx
import { Suspense } from "react";
 
export const experimental_ppr = true;
 
export default function Page() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <p>This is a dynamic page.</p>
      <Suspense fallback="Loading...">
        <p>This is a dynamically loaded component.</p>
      </Suspense>
    </div>
  );
}