What's New in Next.js 15 RC: Exploring the Latest Features

Next.js 15 Release Candidate (RC) is now available, providing a sneak peek into the exciting features and enhancements that will be part of the upcoming stable release. This release includes significant updates to React, caching behavior, partial prerendering, a new API for post-response processing, and improvements to bundling external packages, among other changes. Let's dive into the details of these updates and explore how they can enhance your Next.js applications.

React 19 RC

One of the most anticipated features in Next.js 15 RC is the support for React 19 RC. The Next.js App Router leverages the React canary channel, allowing developers to experiment with and provide feedback on new React APIs before the official release. React 19 RC introduces several new features for both client and server-side rendering, including Actions, which streamline data fetching and mutation within server components.

Upgrading to React 19 RC

To start using React 19 RC with Next.js 15 RC, update your project dependencies:

npm install next@rc react@rc react-dom@rc

Refer to the Next.js 15 upgrade guide and the React 19 upgrade guide for detailed instructions on upgrading. Additionally, watch the React Conf Keynote to learn more about the new features in React 19.

Hydration Error Improvements

Next.js 14.1 made significant strides in improving error messages and handling hydration errors. Next.js 15 builds on this foundation by enhancing the hydration error view, providing more informative error messages that include the source code and suggestions for resolving the issues. This improvement aims to make debugging easier and more efficient.

For example, the previous hydration error message in Next.js 14.1 has been enhanced in Next.js 15 RC to display a more detailed view:

Next.js 14.1 Hydration Error Message:

Next.js 15 RC Hydration Error Message:

React Compiler (Experimental)

The React Compiler is an experimental feature developed by the React team at Meta. It provides automatic optimizations by understanding your code's plain JavaScript semantics and the Rules of React. This reduces the need for manual memoization with APIs like useMemo and useCallback, making your code simpler, easier to maintain, and less error-prone.

Enabling the React Compiler

To enable the React Compiler in your Next.js project, install the Babel plugin:

npm install babel-plugin-react-compiler

Then, add the experimental.reactCompiler option in your next.config.js:

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

module.exports = nextConfig;

You can also configure the compiler to run in "opt-in" mode:

const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
};

module.exports = nextConfig;

Caching Updates

Next.js 15 introduces significant changes to caching behavior based on community feedback. The default caching strategy for fetch requests, GET Route Handlers, and Client Router Cache has been changed from cached to uncached by default. This change aims to provide more predictable behavior and better support for dynamic content.

fetch Requests

In Next.js 15, fetch requests are no longer cached by default. Instead, the no-store cache option is used unless explicitly specified otherwise. This ensures that data is always fetched fresh from the server.

To opt into caching for specific fetch requests, set the cache option to force-cache:

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

Alternatively, you can configure route-level caching:

const nextConfig = {
  experimental: {
    fetchCache: 'default-cache',
  },
};

module.exports = nextConfig;

GET Route Handlers

Similar to fetch requests, GET Route Handlers are no longer cached by default in Next.js 15. To enable caching for GET functions, use the export dynamic = 'force-static' configuration.

Client Router Cache

The Client Router Cache no longer caches Page components by default. This means that as users navigate through your app, the client will always fetch the latest data. However, shared layout data and back/forward navigation behaviors remain unchanged to support partial rendering and maintain scroll position.

To revert to the previous caching behavior, set the staleTimes configuration:

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};

module.exports = nextConfig;

Incremental Adoption of Partial Prerendering (Experimental)

Partial Prerendering (PPR) was introduced in Next.js 14 as an optimization that combines static and dynamic rendering on the same page. In Next.js 15, you can incrementally adopt PPR by enabling it for specific Layouts and Pages using the experimental_ppr config option.

Enabling PPR

To enable PPR for specific routes, set the experimental_ppr option in your next.config.js:

const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};

module.exports = nextConfig;

Wrap dynamic UI components in a Suspense boundary:

import { Suspense } from 'react';
import { StaticComponent, DynamicComponent } from '@/app/ui';

export const experimental_ppr = true;

export default function Page() {
  return (
    <>
      <StaticComponent />
      <Suspense fallback={<div>Loading...</div>}>
        <DynamicComponent />
      </Suspense>
    </>
  );
}

Once all segments have PPR enabled, you can set ppr to true to enable it for the entire app and future routes.

Executing Code After a Response with next/after (Experimental)

Next.js 15 introduces a new experimental API, next/after, that allows you to schedule work to be processed after a response has finished streaming. This is useful for performing secondary tasks like logging and analytics without blocking the primary response.

Enabling next/after

To enable next/after, add the experimental.after option to your next.config.js:

const nextConfig = {
  experimental: {
    after: true,
  },
};

module.exports = nextConfig;

Then, import and use the unstable_after function in your server-side code:

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';

export default function Layout({ children }) {
  after(() => {
    log();
  });

  return <>{children}</>;
}

create-next-app Updates

The create-next-app CLI has received a design update in Next.js 15, making it more user-friendly. A new prompt allows you to enable Turbopack for local development, which significantly speeds up the development process.

Using create-next-app

Run create-next-app to start a new Next.js project:

npx create-next-app@rc

You will be prompted to enable Turbopack:

✔ Would you like to use Turbopack for next dev? … No / Yes

You can also use the --turbo flag to enable Turbopack by default:

npx create-next-app@rc --turbo

Additionally, a new --empty flag has been added to create a minimal "hello world" page:

npx create-next-app@rc --empty

Optimizing Bundling of External Packages (Stable)

Next.js 15 introduces new configuration options to optimize the bundling of external packages. In the App Router, external packages are bundled by default. You can opt-out specific packages using the serverExternalPackages option.

Configuring Bundling

To automatically bundle external packages in the Pages Router, enable the bundlePagesRouterDependencies option:

const nextConfig = {
  bundlePagesRouterDependencies: true,
  serverExternalPackages: ['package-name'],
};

module.exports = nextConfig;

This configuration unifies the behavior between the App and Pages Router, ensuring consistent bundling performance.

Other Changes

Next.js 15 RC includes several other notable changes:

• Minimum React Version: The minimum React version is now 19 RC.
• next/image Updates: The squoosh image optimization library has been removed in favor of sharp, and the default Content-Disposition for images has been changed to attachment.

These changes enhance the overall performance and developer experience in Next.js applications.

Conclusion

Next.js 15 RC brings a host of new features and improvements that make building modern web applications even more efficient and enjoyable. From enhanced support for React 19 RC and the experimental React Compiler to significant updates in caching behavior and partial prerendering, Next.js continues to push the boundaries of web development.

By exploring these new features and providing feedback during the RC phase, you can help shape the final stable

release of Next.js 15. Embrace the power of these updates and start experimenting with Next.js 15 RC in your projects today.

For detailed documentation and migration guides, visit the Next.js RC documentation.

---

I hope this comprehensive overview of Next.js 15 RC helps you understand and leverage the latest features in your projects. Happy coding!