What's New in Next.js 15 RC

Sun May 26 2024

Introduction

Next.js 15 Release Candidate (RC) is now available, bringing a host of new features and improvements. This release allows developers to test the latest functionalities and provide feedback before the stable release. Let's explore the key features introduced in Next.js 15 RC.

React 19 RC Support

Next.js 15 supports React 19 RC, which includes new client and server features, such as Actions. This ensures compatibility with the latest advancements in the React ecosystem, providing developers with cutting-edge tools for building modern web applications.

React Compiler (Experimental)

The experimental React Compiler from Meta optimizes components at build time, reducing the need for manual memoization. This compiler analyzes your code to apply optimizations that improve performance and reduce re-renders.

npm install babel-plugin-react-compiler

// next.config.js
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
module.exports = nextConfig;

Hydration Error Improvements

Next.js 15 introduces enhanced error messages for hydration issues. These improved messages display the source code and provide suggestions for fixes, making it easier for developers to identify and resolve problems during development.

Caching Updates

Fetch requests, GET Route Handlers, and client navigations are now uncached by default. However, developers can opt into caching as needed, providing greater control over caching strategies.

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

Partial Prerendering (Experimental)

Partial Prerendering allows incremental adoption by combining static and dynamic rendering on the same page using Suspense boundaries. This feature is especially useful for applications that require a mix of pre-rendered and dynamically rendered content.

// next.config.js
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};
module.exports = nextConfig;

next/after (Experimental)

The next/after function schedules tasks to run after the response has finished streaming, enhancing performance for non-essential tasks. This allows developers to defer certain operations until after the main content has been delivered to the user.

import { unstable_after as after } from 'next/server';
after(() => {
  // Secondary task
  console.log('Task executed after response');
});

create-next-app Updates

The create-next-app command has been updated with a new design and Turbopack support for local development. Additionally, the --empty flag creates a minimal "hello world" project setup.

npx create-next-app@rc --turbo
npx create-next-app@rc --empty

Optimizing Bundling of External Packages

Next.js 15 introduces new configuration options for both the App and Pages Router to control bundling behavior. This allows developers to fine-tune how external packages are bundled with their application.

// next.config.js
const nextConfig = {
  bundlePagesRouterDependencies: true,
  serverExternalPackages: ['package-name'],
};
module.exports = nextConfig;

Conclusion

Next.js 15 RC introduces several experimental and stable features aimed at improving performance, developer experience, and scalability. Developers are encouraged to test these features and provide feedback to help refine them before the stable release.