Exciting News: Next.js 15 Release Candidate is Here!

Posted by:

• Delba de Oliveira (@delba_oliveira)
• Zack Tanner (@zt1072)

New Features and Updates

The Next.js 15 Release Candidate (RC) is now available for early adopters to explore and provide feedback on the latest enhancements before the official release.

React 19 RC Integration

• Support for React 19 RC: Now, you can leverage the latest features of React 19, including Actions, for both client and server-side operations.
• React Compiler (Experimental): A new experimental compiler from Meta, reducing the need for manual optimizations like useMemo and useCallback.

Enhanced Caching Mechanisms

• Caching Updates: Fetch requests, GET route handlers, and client navigations are no longer cached by default, enhancing dynamic data handling.
• Fine-Grained Control: Easily opt into caching where necessary, ensuring optimal performance.

Partial Prerendering (Experimental)

• Incremental Adoption: A new layout and page config option allows for gradual adoption of Partial Prerendering, blending static and dynamic rendering seamlessly.

Next/After (Experimental)

• Post-Response Code Execution: A novel API to execute tasks like logging and analytics after the response has finished streaming, improving efficiency.

Create-Next-App Enhancements

• Updated Design and Features: New flags for enabling Turbopack in local development and starting projects with a minimal setup.

Bundling External Packages (Stable)

• Optimized Bundling: New config options for bundling external packages in both App and Pages Router, enhancing cold start performance.

Try the Next.js 15 RC Today!

To get started, install the Release Candidate with the following command:

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

For detailed documentation, visit rc.nextjs.org/docs until the general availability of Next.js 15.

React Compiler (Experimental) Setup:

Install the Babel plugin:

npm install babel-plugin-react-compiler

Add the experimental configuration to next.config.js:

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

module.exports = nextConfig;

Optional: Configure the compiler in "opt-in" mode:

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

module.exports = nextConfig;

Hydration Error Improvements

Building on the enhancements from Next.js 14.1, Next.js 15 now offers improved hydration error views, providing source code insights and suggestions for resolving issues.

Detailed Caching Changes

Next.js 15 introduces significant changes to caching defaults:

• Fetch Requests: Now use no-store by default, ensuring the most up-to-date data is fetched.
• GET Route Handlers: No longer cached by default.
• Client Router Cache: Page components reflect the latest data, while shared layout data and navigation behaviors are optimized for performance.

Opt-In Caching Options:

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

module.exports = nextConfig;

Partial Prerendering Adoption

With the experimental_ppr option, you can incrementally adopt Partial Prerendering for specific layouts and pages, enabling a seamless blend of static and dynamic rendering.

Example Usage:

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

export const experimental_ppr = true;

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

Update next.config.js for incremental adoption:

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

module.exports = nextConfig;

Executing Code Post-Response with next/after

Optimize secondary tasks without blocking the primary response using the after() API:

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

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

  return <>{children}</>;
}

Other Notable Changes

• Breaking Changes: Minimum React version is now 19 RC, removal of squoosh in favor of sharp for next/image, and several other updates.
• Improvements: Enhanced metadata handling, optimized tree-shaking, and refined parallel routes.
• Docs and Config Updates: Improved documentation for authentication and environment variables.

For a comprehensive list of changes, check out the upgrade guide.

Join the Community and Share Your Feedback

Dive into the Next.js 15 RC and let us know your thoughts. Your feedback helps shape the future of Next.js!

Stay tuned for more updates as we approach the general availability of Next.js 15!