Next.js 15: Release Candidate - What's New?

June 2, 20243 min read
Next.js 15: Release Candidate - What's New?

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: <img src="/blog/hydration-before.avif" alt="Hydration Error before" />
This error will now be displayed as: <img src="/blog/hydration-after.avif" alt="Hydration Error after" />

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

Read more posts

The new Form Component from Next.js 15

The new Form Component from Next.js 15

October 28, 20242 min read
Next.js 15 has just released and it has come with a new Form Component. This new Form Component is especially useful for forms that redirect to a new url for example when you try to search for blog posts and that redirects to a page that displays all the blog posts with that specific query.
Astro 3.0 has made waves in the web development community

Astro 3.0 has made waves in the web development community

September 10, 20245 min read
Astro 3.0 has made waves in the web development community as the first major framework to support the View Transitions API. This groundbreaking feature allows for seamless and visually appealing transitions between different states or views in web applications. With just a few lines of code, developers can easily incorporate fade, slide, morph, and persist animations across page navigation, creating a more immersive user experience.
Testing Next.js Apps: Best Practices & Tools

Testing Next.js Apps: Best Practices & Tools

August 15, 20247 min read
Testing is an essential part of the software development process, ensuring that applications function as expected and remain stable over time. In this blog, we will explore the best practices for testing Next.js applications using popular testing tools like Jest, Cypress, Playwright, and React Testing Library. By following these guidelines, you can maximize your confidence in your code, catch bugs early, and deliver high-quality software to your users.
React Compiler: what does it do and what's new

React Compiler: what does it do and what's new

June 9, 20243 min read
The React Compiler is a experimental compiler that has been open sources to the community in order to receive feedback and ideas. As you can imagine this means it is not production ready yet. However, it is a great way to get a feel for what this compiler of React does and can do. Keep in mind that this experimental compiler needs React 19 to work.