GAZAR

Principal Engineer | Mentor

Next.js 15 Release Candidate: New Features and Enhancements

Next.js 15 Release Candidate: New Features and Enhancements

The release candidate for Next.js 15 introduces a variety of new features and improvements aimed at enhancing developer experience, performance, and flexibility. Here's a detailed look at the key updates:

React 19 Support and React Compiler (Experimental)

Next.js 15 RC now supports the React 19 Release Candidate, which brings significant changes and improvements, including an experimental React Compiler. The React Compiler can be enabled by installing the Babel plugin and configuring your next.config.js:

npm install babel-plugin-react-compiler

and next.config.ts

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

module.exports = nextConfig;

Additionally, there are updates to hydration error messages, aimed at simplifying and speeding up the debugging process.

Updated Caching Defaults

Caching behavior has been adjusted in Next.js 15 RC. Fetch requests, GET route handlers, and client navigations are no longer cached by default. This change addresses common confusion among developers and makes cache management more explicit.

Incremental Adoption of Partial Prerendering (Experimental)

Partial Prerendering (PPR) allows a hybrid approach where parts of a page are statically rendered while others remain dynamic. This ensures fast initial loads with static content served from the edge and dynamic content streamed in parallel. To enable PPR, update your configuration as follows:

export const experimental_ppr = true

and in next.config.ts

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

module.exports = nextConfig;

PPR merges the benefits of static site generation (SSG) and server-side rendering (SSR), providing a unified rendering model that eliminates many trade-offs.

New next/after API (Experimental)

The next/after API allows you to execute code after a response has finished streaming. This is particularly useful for tasks like logging, analytics, or synchronizing with external systems without making the user wait. Here’s how to enable and use it:

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

module.exports = nextConfig;

Usage Example:

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

  return <>{children}</>;
}

Enhancements in create-next-app

The create-next-app tool has been updated with a new design and a flag to enable Turbopack during local development. This streamlines the initial setup process and improves the development experience.

Optimizing bundling of external packages (Stable)

Bundling external packages can significantly enhance the cold start performance of your application. In Next.js 15 RC, external packages are bundled by default in the App Router. You can opt-out specific packages using the serverExternalPackages configuration option:

const nextConfig = {
  // Automatically bundle external packages in the Pages Router:
  bundlePagesRouterDependencies: true,
  // Opt specific packages out of bundling for both App and Pages Router:
  serverExternalPackages: ['package-name'],
};

module.exports = nextConfig;

Next.js 15 RC introduces a range of features and improvements, from supporting the latest React version and improving caching defaults to introducing innovative features like Partial Prerendering and the next/after API. These updates are designed to enhance performance, streamline development, and provide greater flexibility for developers building modern web applications.


Comments