--- title: "What’s New in Next.js 15 RC?" published_at: "2024-08-29T11:53:51+00:00" modified_at: "2026-02-10T11:21:16+00:00" url: "https://www.syncfusion.com/blogs/post/whats-new-in-next-js-15-rc" excerpt: "This blog explores the cutting-edge features of Next.js 15 RC, including React 19 support and experimental advancements." taxonomy_category: - "Development" - "React" - "Web" - "What's new" taxonomy_post_tag: - "development" - "productivity" - "React" - "Web" --- # What’s New in Next.js 15 RC? [Vinoth Kumar Sundara Moorthy](https://www.syncfusion.com/blogs/author/vinoth-kumar-sundara-moorthy) ![What's New in Next.js 15 RC?](https://www.syncfusion.com/blogs/wp-content/uploads/2024/08/Whats-New-in-Next.js-15-RC.png) **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 the [Next.js 15 RC](https://nextjs.org/blog/next-15-rc) to test the latest features for the upcoming stable release of [Next.js](https://nextjs.org/) . 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 of **Next.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 for **react** and ** react-dom** are 19. For more information on version upgrading, refer to the [official documentation](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) . 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 our [blog](https://www.syncfusion.com/blogs/post/whats-new-in-react-19) . 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 the [React 19 upgrade guide](https://react.dev/blog/2024/04/25/react-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 manual **memoization** techniques like ** useMemo** and ** useCallback**. As a result, your code becomes more concise, easier to maintain, and less prone to errors. With Next.js 15, [React Compiler](https://react.dev/learn/react-compiler) support has been added. However, the React Compiler can currently only be used in Next.js through a **Babel** plugin. ``` npm install babel-plugin-react-compiler ``` Add the **experimental.reactCompiler** option in the ** next.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**, and ** Turbopack.** ### 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 manual ** memoization**, 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 on [Hydration error improvements](https://nextjs.org/blog/next-15-rc#hydration-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 **** or ** useRouter**, the client-side router no longer caches [page](https://nextjs.org/docs/app/api-reference/file-conventions/page) 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 the [staleTimes](https://nextjs.org/docs/app/api-reference/next-config-js/staleTimes) 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 the [Web fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) cache option to define how a server-side fetch request interacts with the framework’s persistent HTTP cache. The **no-store** option fetches a resource from a remote server on every request and does not update the cache. The ** force-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 option **force-cache** for a specific fetch call. - Use **force-static** for a dynamic route’s config. - Set the **fetchCache** route config to ** default-cache** to apply ** force-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 the **GET 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 for **GET** route handlers, use a static route configuration option like: ``` export dynamic = 'force-static' ``` Special Route Handlers such as **sitemap.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 experimental **staleTimes** 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 a ** staleTime** 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 per ** staleTimes.static** config. You can opt into the previous client router cache behavior by setting the following configuration: **next.config.ts** ``` const nextConfig = { experimental: { staleTimes: { dynamic: 30, }, },}; module.exports = nextConfig; ``` ## Create-next-app enhancements Let’s discuss the improvements in **create-next-app**. When you launch the app, it now has a new landing page and provides a prompt for choosing ** Turbopack** when creating the Next app. The Next.js 14 release introduced an incremental bundler called **Turbopack**, which is written in ** Rust** and designed to optimize ** JavaScript** and ** TypeScript.** It has been integrated into Next.js to improve development performance. In the Next.js 15 RC, when running the **create-next-app** command, a new prompt asks whether you would like to enable ** Turbopack** for local development. The default setting is ** No.** ``` ✔ 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 minimal ** Hello 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 the [serverExternalPackages](https://rc.nextjs.org/docs/app/api-reference/next-config-js/serverExternalPackages) configuration option. In the **Pages Router**, external libraries are not bundled by default. However, you can specify a list of libraries you wish to bundle through the [transpilePackages](https://rc.nextjs.org/docs/pages/api-reference/next-config-js/transpilePackages) option, which requires individual package specifications. To streamline configurations across both the **App** and ** Pages routers,** a new option named [bundlePagesRouterDependencies](https://rc.nextjs.org/docs/pages/api-reference/next-config-js/bundlePagesRouterDependencies) was introduced. This setting will align with the App Router’s default behavior of automatically bundling external libraries. The [serverExternalPackages](https://rc.nextjs.org/docs/app/api-reference/next-config-js/serverExternalPackages) 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. The **after()** 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, add **experimental.after** to your ** next.config.js**. ``` const nextConfig = { experimental: { after: true, }, }; module.exports = nextConfig; ``` Then, import the function in **Server Components**, ** Server Actions**, ** Route Handlers**, or ** Middleware.** ``` import { unstable_after as after } from 'next/server'; …. export default function Layout({ 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 like **cookies()**, ** headers()**, or uncached data requests are used, which switch the entire route to dynamic rendering. With PPR, you can wrap dynamic UI components in a ** Suspense** 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 an **experimental_ppr** route config option to enable PPR for specific ** Layouts** and ** Pages.**Refer to the following code example. ``` import { Suspense } from "react" import { StaticComponent, DynamicComponent } from "@/app/ui" export const experimental_ppr = true export default function Page() { return { <> }; } ``` To use this new option, set the **experimental.ppr** config to ** incremental** in your ** next.config.js** file. ``` const nextConfig = { experimental: { ppr: 'incremental', }, }; module.exports = nextConfig; ``` Once all segments have PPR enabled, setting the **ppr** value to ** true** 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 the [official documentation](https://nextjs.org/blog/next-15-rc) for the latest updates and best practices for a smooth transition. You can check practical demonstrations regarding using Syncfusion with React NextJS in our [demos](https://ej2.syncfusion.com/nextjs/demos/fluent2/grid/overview) . 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 the [UG documentation](https://ej2.syncfusion.com/react/documentation/getting-started/nextjs) . Syncfusion’s [React](https://www.syncfusion.com/react-components) 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 the [License and Downloads](https://www.syncfusion.com/account/downloads) page. We offer our new users a [30-day free trial](https://www.syncfusion.com/downloads/) to explore all our components’ features and capabilities. If you need further assistance, contact us via our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback) . We’re always here to help you! ## Related blogs - [What’s New in React 19?](https://www.syncfusion.com/blogs/post/whats-new-in-react-19) - [Static Site Generators: Gatsby vs. Next.js](https://www.syncfusion.com/blogs/post/static-site-generators-gatsby-vs-next-js-in-2022) - [Optimize Next.js App Bundle and Improve Its Performance](https://www.syncfusion.com/blogs/post/optimize-next-js-app-bundle) - [Top 7 Ways to Write CSS in Your React or Next.js App](https://www.syncfusion.com/blogs/post/write-css-react-next-js) - [Using React 18 Features in NextJS](https://www.syncfusion.com/blogs/post/using-react-18-features-in-nextjs)