Next.js 15. What's New, What Changed, Breaking Changes.

Special thanks to Łukasz Gajownik for helping out with this blog post.

Next.js is the most popular full-stack React framework out there, and it's getting its fifteenth major update. It won't be as revolutionary as the previous one, which introduced React Server Components among others, but it will bring many goodies designed to make working with web apps easier and more pleasant. Even after fifteen updates, the base rules haven't changed, and the framework still stays true to them: "zero setup and using the file system as an API; only using JavaScript, with everything acting as a function; automatic server-rendering and code-splitting; data-fetching is up to the developer; anticipation is the key to performance; and simple deployment."

React 19

React 19 (see the documentation for version 19 here) is perhaps the most significant change this time around. The new version brings some changes that you might or might not have heard about, including:

• Actions
• New hook: useActionState
• Form Actions
• New hook: useFormStatus
• New hook: useOptimistic
• Server Components

If you have a weird feeling you have seen some of these before, that's because you have, quite possibly in Next 14. This time around, Meta is bringing support for these features to a wider audience, such as non-Next.js users.

One underrated change is full support for custom elements. React previously struggled with Web Components, but that's in the past now, as Meta's JS library has full support.

React Compiler

Compiling framework/library code isn't a new concept. Svelte, Vue, Solid, and others have done it for a long time. The React team picked up on that some time ago and first introduced the compiler during a React talk "React without memo" in 2021. About 3 years later, we can finally give the compiler a shot and offload a lot of busy work, including memoization. Letting the compiler perform optimizations should also make our code simpler, and our apps may turn out faster. If you want to take a quick peek at the before and after code, you can jump in and have fun with the Compiler Playground.

React 19 Breaking Changes

• Errors in render are not re-thrown
• Removed: propTypes and defaultProps for functions
• Removed: Module pattern factories

For a full list of breaking changes, please refer to the blog post at 19.react.dev/blog.

Incremental Adoption of Partial Prerendering (Experimental)

Partial prerendering isn't an entirely new feature - it was introduced in Next.js 14. The novelty is that the feature can now be adopted incrementally. If you add the "experimental_ppr" route config option to your page, you opt the whole page into Partial Prerendering.

Why would you want to do it? Partial prerendering lets you combine static content with dynamic content. Prerendering only part of the page is a compromise between keeping data as fresh as possible on one side, and faster websites, reduced server load, and SEO on the other.

"next/after" (Experimental)

The new module allows you to execute code after a response. Previously, if you deployed your site to a serverless host, running a function right after loading wasn't straightforward. Quoting the blog, "[d]eferring the work after responding to the user poses a challenge because serverless functions stop computation immediately after the response is closed."

The Next.js team solved this issue by introducing "after()". Why would you need it? It's useful for "logging, analytics, and other external system synchronization".

Caching Changes

Previously, Next.js App Router had highly opinionated caching defaults. Caching of "fetch" requests, client route changes, and GET route handler requests was opt-out: they were all cached by default. Starting from this release, caching is opt-in instead.

In other words, in fetch "no-store is used by default if a cache option is not provided. This means fetch requests will not be cached by default". GET route handlers will not be cached unless you "opt into caching using a static route config option such as export dynamic = 'force-static'." Lastly, to opt into router caching, set the route config option of "staleTime" to your preferred values for both dynamic and static pages.

For web app developers, this means you will have to set cache times consciously on your own, which in theory gives you more control over caching.

Next.js 15 Breaking Changes

As with almost any major update, there are breaking changes. The most important ones are:

• Minimum React version is now 19 RC
• Removed squoosh in favor of sharp as an optional dependency
• Changed default "Content-Disposition" to "attachment"
• Enable swcMinify, missingSuspenseWithCSRBailout, and outputFileTracing behavior by default and remove deprecated options.

For the full list, refer to the list here.

The Next.js 15 update is an evolution, not a revolution. This major update brings many changes that will help with SEO. We can optimize the client bundle, opt into partial prerendering page by page, and minification with SWC is enabled by default. For a company that develops big web apps, the introduction of the compiler is perhaps the most important change. Automatic memoization will make it much easier to create efficient apps.

If you want to talk about building a custom web app in Next.js, contact us by clicking this link.