Recent News and Updates in Next.js 15

4 min readJun 13, 2024

Next.js 15 is set to bring a host of new features and improvements designed to enhance the development experience and performance of web applications. This upcoming release builds on the foundation of previous versions, integrating state-of-the-art technologies and community feedback to provide a robust framework for modern web development. Let’s explore the key updates and changes expected in this version.

Features and Improvements 🚀

Support for React 19

Next.js 15 will introduce support for React 19, incorporating new features for both client and server environments, such as Actions. The Next.js App Router will be built on the React canary channel, allowing developers to experiment with and provide feedback on these new React APIs ahead of the official React 19 release.

Introduction of React Compiler

Following up on the improvements made in earlier versions, Next.js 15 will offer even more detailed hydration error messages. Developers will benefit from enhanced source code views and actionable suggestions, making the process of debugging and resolving issues more efficient.

Enhanced Hydration Error Messages

Updates to Caching Behavior

Next.js 15 will revise the default caching behavior for fetch requests, GET Route Handlers, and client navigations. This change, driven by community feedback, aims to improve compatibility with Partial Prerendering (PPR) and third-party libraries.

Fetch Requests: By default, fetch requests will not be cached (no-store).
GET Route Handlers: These will also default to uncached.
Client Router Cache: Page components will have a default staleTime of 0.

Developers will still be able to opt into caching when needed, ensuring flexibility in managing cache behavior.

fetch(‘https://example.com', { cache: ‘force-cache’ });

Incremental Adoption of Partial Prerendering

First introduced in Next.js 14, Partial Prerendering (PPR) allows the combination of static and dynamic rendering on the same page. Typically, Next.js defaults to static rendering unless dynamic functions like cookies(), headers(), or uncached data requests are used, which opt an entire route into dynamic rendering. PPR enables dynamic UI elements to be wrapped in a Suspense boundary, serving a static HTML shell initially and then rendering and streaming the dynamic parts within the same HTTP request.

Enabling PPR Incrementally

Next.js 15 introduces an experimental_ppr route config option to adopt PPR incrementally.

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>
     </>
  };
}

To enable PPR incrementally, set the experimental.ppr configuration in next.config.js:

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

Once all segments have PPR enabled, you can set the PPR value to true for the entire application and future routes. Further details on the PPR roadmap will be shared in the Next.js 15 GA blog post.

Running Code After a Response with next/after

In Next.js 15 the new experimental next/after API will allow you to run secondary tasks like logging, analytics, and synchronization with external systems after the primary response has been sent to the user. This prevents these tasks from slowing down the user experience.

Key Features:

Non-blocking Secondary Tasks: Perform tasks without delaying the user response.
Enhanced Performance: User experience is prioritized by completing the primary response first.

How to Enable:

1. Configure next.config.js.

Add the experimental.after option to your configuration file:

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

module.exports = nextConfig;

2. Use the API in Your Code.

Import and utilize the after function in server components, server actions, route handlers, or middleware:

import { unstable_afterResponse as afterResponse } from 'next/server';
import { logEvent } from '@/utils/logger';

export default function AppLayout({ children }) {
  // Schedule secondary task
  afterResponse(() => {
    logEvent();
  });

  // Render primary content
  return <>{children}</>;
}

By adopting the next/after API, you can ensure that secondary tasks run efficiently without compromising the responsiveness of your application. This approach allows for a smoother user experience by handling additional processing in the background.

create-next-app Updates

The create-next-app command has been updated with a new design and additional options to streamline the development process. When running create-next-app, there is now a prompt asking if you want to enable Turbopack for local development.

npx create-next-app@rc — turbo

Optimizing Bundling of External Packages

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

For the Pages Router, external packages are not bundled by default, but you can specify packages to bundle using the transpilePackages option. To unify configuration between the App and Pages Routers, the bundlePagesRouterDependencies option matches the default automatic bundling of the App Router.

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

module.exports = nextConfig;

Conclusion

Next.js 15 brings significant enhancements and new features, including support for React 19, the experimental React Compiler, improved hydration error handling, updated caching defaults, and innovative APIs like next/after and Partial Prerendering. These updates aim to streamline development and optimize performance, preparing developers for the future of web application development.

Telegram / Instagram / Facebook / Threads / GitHub