TL;DR: Explore Next.js 15 RC’s innovative features, including support for React 19 RC, improved hydration error handling, and advanced caching updates. The blog covers stable enhancements like the React Compiler and experimental features such as partial prerendering. Learn how to upgrade to the new version and leverage these improvements for more efficient web development.

In this blog, we will explore theNext.js 15 RC to test the latest features for the upcoming stable release ofNext.js. The first release candidate for Next.js 15 RC was rolled out on May 23, 2024. This means we can examine all the new development, production, and caching features. The latest updates include several key features organized into stable and experimental improvements.

Stable improvements

• Support for React 19 RC
• Hydration error improvements
• Caching improvements
• Updated create-next-app
• Bundling external packages

Experimental features

• React compiler
• Partial prerendering
• Next/After

What is Next.js?

Next.js is a versatile, open-source React framework developed by Vercel. It is designed to easily build fast, SEO-friendly, and user-friendly web apps. It elegantly combines server-side rendering, static site generation, and client-side rendering capabilities, making it an outstanding choice for modern web development.

Its features include automatic code splitting, efficient routing, API routes, and an optimized production build, contributing to its performance and scalability. Moreover, Next.js prioritizes developer experience, offering fast refresh for a more seamless coding process. This ensures that it caters to the end user’s needs and those creating the apps.

How do I upgrade to the latest Next.js version?

To upgrade to the latest version ofNext.js (version 15 RC), use the following command with your preferred package manager:

NPM

npm i next@rc react@rc react-dom@rc eslint-config-next@rc

Yarn

yarn add next@rc react@rc react-dom@rc eslint-config-next@rc

Please note that the minimum required versions forreact andreact-dom are 19. For more information on version upgrading, refer to theofficial documentation.

Let me walk through a bunch of improvements step by step.

React 19 RC

Before upgrading to React 19 RC, please check the new features and updates by visiting ourblog.

With the unveiling of React 19 RC, the Next.js App Router is being developed on the React canary channel specifically for frameworks. This allows developers to utilize and provide input on the latest React APIs ahead of the official v19 launch. Next.js 15 RC will be compatible with React 19 RC, bringing forth novel features for both client-side and server-side environments, including Actions.

For more information, please refer to theReact 19 upgrade guide.

React Compiler

The React Compiler is a new experimental compiler developed by the React team at Meta. It leverages its understanding of plain JavaScript semantics and the Rules of React to analyze and optimize your code. This deep understanding enables the compiler to automatically apply optimizations, reducing the need for manualmemoization techniques likeuseMemo anduseCallback. As a result, your code becomes more concise, easier to maintain, and less prone to errors.

With Next.js 15,React Compiler support has been added. However, the React Compiler can currently only be used in Next.js through aBabel plugin.

npm install babel-plugin-react-compiler

Add theexperimental.reactCompiler option in thenext.config.js file.

const nextConfig = { experimental: { reactCompiler: true, },}; module.exports = nextConfig;

Using the experimental option ensures support for the React Compiler in the following areas:App Router,Pages Router,Webpack, andTurbopack.

Key benefits of the React Compiler

• Automatic optimization: The compiler identifies opportunities to optimize your code, improving performance without manual effort.
• Reduced boilerplate: Lessens the need for manualmemoization, leading to cleaner and more concise code.
• Improved maintainability: Simplifies code, making it easier to understand and modify.
• Error prevention: Helps avoid common performance pitfalls related to unnecessary re-renders.

Note: The React Compiler is currently in an experimental phase, and its features and capabilities may evolve. It’s recommended that you stay updated with the latest developments and consider using it cautiously in your projects.

Hydration error enhancements

Next.js 15 has improved the way hydration errors are displayed. Hydration errors happen in Next.js when there is a mismatch between the HTML rendered on the server and the HTML rendered in the client during the initial load. This mismatch can be caused by text, incorrect HTML nesting, and browser-specific code. With the new improvements, when a hydration error occurs, the source code of the error is displayed, along with suggestions on how to fix the issue.

For more details, refer to the official Next.js documentation onHydration error improvements.

Caching updates

Caching in Next.js is essential for improving performance and reducing server load. The Next.js App Router was introduced with opinionated caching defaults, designed to provide optimal performance by default with the ability to opt out when necessary.

In Next.js 15, the default behavior for caching fetch requests, GET Route Handlers, and the Client Router Cache has been updated. Previously, these were cached by default, but now they are uncached by default. If you prefer the old behavior, you can still opt into caching. Note that layouts and loading states will continue to be cached and reused during navigation.

Client-side navigation cache

When navigating between pages using oruseRouter, the client-side router no longer cachespage segments. However, these segments are still reused during browser back and forward navigation, as well as for shared layouts. To enable caching for specific page segments, you can use thestaleTimes configuration option.

fetch Requests

In Next.js 15, fetch requests are no longer cached by default. Previously,force-cache was the default unless a dynamic function or dynamic config option was used.

Use the Web fetch API cache option to control caching.

fetch('https://...',{cache:'force-cache'|'no-store'});

Next.js uses theWeb fetch API cache option to define how a server-side fetch request interacts with the framework’s persistent HTTP cache. Theno-store option fetches a resource from a remote server on every request and does not update the cache. Theforce-cache option fetches a resource from the cache if it exists, or a remote server and updates the cache.

To enable caching for fetch requests, you can:

• Use the cache optionforce-cache for a specific fetch call.
• Useforce-static for a dynamic route’s config.
• Set thefetchCache route config todefault-cache to applyforce-cache globally on a page or layout, except for fetch calls with a different cache setting.

GET route handlers

In Next 14, Route Handlers that used theGET HTTP method were cached by default unless they used a dynamic function or dynamic config option. In Next.js 15,GET route handlers are no longer cached by default.

To enable caching forGET route handlers, use a static route configuration option like:

exportdynamic='force-static'

Special Route Handlers such assitemap.ts and other metadata files are static by default unless they use dynamic functions or dynamic config options.

Client router cache behavior in Next.js 15

An experimentalstaleTimes flag was introduced to allow custom configuration of the Router Cache in Next.js 14.2.0. This flag still remains accessible in Next.js 15. However, we are changing the default behavior to astaleTime of 0 for Page segments. This means that as you navigate your app, the client will always reflect the latest data from the Page component(s) that become active as part of the navigation. However, there are still important behaviors that remain unchanged:

• Shared layout data avoids server re-fetching, supporting partial rendering.
• Browser back/forward navigation restores cache, including scroll position.
• Loading.js is cached for 5 minutes or perstaleTimes.static config.

You can opt into the previous client router cache behavior by setting the following configuration:

next.config.ts

constnextConfig={experimental:{staleTimes:{dynamic:30,},},};module.exports=nextConfig;

Create-next-app enhancements

Let’s discuss the improvements increate-next-app. When you launch the app, it now has a new landing page and provides a prompt for choosingTurbopack when creating the Next app.

The Next.js 14 release introduced an incremental bundler calledTurbopack, which is written inRust and designed to optimizeJavaScript andTypeScript. It has been integrated into Next.js to improve development performance.

In the Next.js 15 RC, when running thecreate-next-app command, a new prompt asks whether you would like to enableTurbopack for local development. The default setting isNo.

 ![✔](https://s.w.org/images/core/emoji/14.0.0/72x72/2714.png) Would you like to use Turbopack for next dev? … No / Yes

The–turbo flag can be used to activate Turbopack.

npx create-next-app@rc –turbo

To simplify the process of getting started on a new project, a new–empty flag has been included in the CLI. This flag removes unnecessary files and styles, resulting in a minimalHello world page.

npx create-next-app@rc –empty

Improving the bundling of external libraries (stable)

Integrating external libraries can enhance an app’s initial load performance. By default, the app router bundles external libraries, but you can exclude particular libraries using theserverExternalPackages configuration option.

In thePages Router, external libraries are not bundled by default. However, you can specify a list of libraries you wish to bundle through thetranspilePackages option, which requires individual package specifications.

To streamline configurations across both theApp andPages routers, a new option namedbundlePagesRouterDependencies was introduced. This setting will align with the App Router’s default behavior of automatically bundling external libraries. TheserverExternalPackages option remains available to exclude specific libraries as needed.

Response execution with next/after (experimental)

When handling a user request, the server usually focuses on tasks directly related to generating the response. However, additional tasks like logging, analytics, or synchronizing with external systems often need to be performed.

These secondary tasks should ensure the user’s response is timely. Deferring such tasks can be challenging because serverless functions typically stop execution as soon as the response is sent.

Theafter() API, currently experimental, addresses this issue by allowing you to schedule tasks to run after the response has been streamed. This enables secondary tasks to execute without blocking the primary response.

To enable this feature, addexperimental.after to yournext.config.js.

constnextConfig={experimental:{after:true,},};module.exports=nextConfig;

Then, import the function inServer Components,Server Actions,Route Handlers, orMiddleware.

import{unstable_afterasafter}from'next/server';….exportdefaultfunctionLayout({children}){// Secondary task.after(()=>{….});// Primary task.return<>{children}</>;}

Partial prerendering

Partial Prerendering, or PPR, was rolled out in Next.JS 14. It is an optimization that blends static and dynamic rendering on the same page.

By default, Next.js uses static rendering unless dynamic functions likecookies(),headers(), or uncached data requests are used, which switch the entire route to dynamic rendering. With PPR, you can wrap dynamic UI components in aSuspense boundary. When a new request is made, Next.js immediately serves a static HTML shell and then renders and streams the dynamic parts within the same HTTP request.

To facilitate incremental adoption, we’ve added anexperimental_ppr route config option to enable PPR for specificLayouts andPages. Refer to the following code example.

import{Suspense}from"react"import{StaticComponent,DynamicComponent}from"@/app/ui"exportconstexperimental_ppr=trueexportdefaultfunctionPage(){return{<><StaticComponent/><Suspensefallback={...}><DynamicComponent/></Suspense></>};}

To use this new option, set theexperimental.ppr config toincremental in yournext.config.js file.

constnextConfig={experimental:{ppr:'incremental',},};module.exports=nextConfig;

Once all segments have PPR enabled, setting theppr value totrue will be safe, enabling it for the entire app and all future routes.

Conclusion

Thanks for reading! In this article, we delved into the notable features and improvements of Next.js 15 RC, covering everything from stable advancements like React 19 RC support and enhanced caching techniques to experimental additions such as the React Compiler and partial prerendering. Next.js is pushing the envelope of web development, enhancing both the developer experience and the performance of web apps.

With its emphasis on optimizing development flows and fine-tuning app performance, Next.js 15 RC reflects a clear vision for the future of web development. As we anticipate the stable release, this version offers a glimpse into a more efficient and dynamic approach to building web apps. For those looking to upgrade or kickstart new projects, Next.js 15 RC is worth exploring, promising to elevate your web development endeavors to new heights. Keep an eye on theofficial documentation for the latest updates and best practices for a smooth transition.

You can check practical demonstrations regarding using Syncfusion with React NextJS in ourdemos. These demonstrations are designed to guide you through the integration process, showcasing various features and capabilities to enhance your projects.

Additionally, check the step-by-step guide for setting up a Next.js app and integrating the Syncfusion React components in theUG documentation.

Syncfusion’sReact UI components library is the only suite you will ever need to build an app. It contains over 80 high-performance, lightweight, modular, and responsive UI components in a single package.

If you’re already a Syncfusion user, the latest version of Essential Studio is available on theLicense and Downloads page. We offer our new users a30-day free trial to explore all our components’ features and capabilities.

If you need further assistance, contact us via oursupport forum,support portal, orfeedback portal. We’re always here to help you!

Related blogs

• What’s New in React 19?
• Static Site Generators: Gatsby vs. Next.js
• Optimize Next.js App Bundle and Improve Its Performance
• Top 7 Ways to Write CSS in Your React or Next.js App
• Using React 18 Features in NextJS