Nitesh Babu - What-s-new-in-next-15

Next.js 15 is poised to introduce a range of new features and enhancements aimed at improving the development experience and boosting the performance of web applications. This forthcoming release builds on the strengths of earlier versions, incorporating leading-edge technologies and input from the community to offer a solid framework for contemporary web development. Let’s dive into the main updates and changes anticipated in this version.

New Features

Support for React 19

Next.js 15 is set to support React 19, bringing an array of new features tailored for both client and server environments, including Actions. The Next.js App Router will leverage the React canary channel, enabling developers to engage with and share their insights on these new React APIs prior to the official release of React 19.

Enhanced Hydration Error Messages

Next.js 15 builds on the enhancements from previous versions by providing more comprehensive hydration error messages. Developers will gain improved views of the source code along with actionable recommendations, streamlining the debugging process and helping to resolve issues more effectively.

Updates to Caching Behavior

The default caching strategy for fetch requests, GET Route Handlers, and client navigations will be redesigned in Next.js 15. Motivated by community comments, this change aims to improve compatibility with a number of third-party libraries and Partial Prerendering (PPR).

Fetch Requests: Fetch requests, by default, will not be cached (no-store).

GET Route Handlers: Default to uncached.

Client Router Cache: The staleTime of page components will be set to 0 by default.

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

Incremental Adoption of Partial Prerendering

Initially presented in Next.js 14, Partial Prerendering (PPR) facilitates the integration of both static and dynamic rendering on a single page. By default, Next.js employs static rendering, unless dynamic functions such as cookies(), headers(), or uncached data requests are invoked, which transition the entire route to dynamic rendering. PPR allows for dynamic user interface components to be enclosed within a Suspense boundary, delivering a static HTML framework at first, followed by the rendering and streaming of the dynamic segments within the same HTTP request.

Enabling PPR Incrementally

In Next.js 15 there is an experimental_ppr route config option to use PPR incrementally.

import { Suspense } from "react"
import { StaticComponent, DynamicComponent } from "@/app/ui"
 
// this can be set on pages
export const experimental_ppr = true
 
export default function Page() {
  return {
     <>
	     <StaticComponent />
	     <Suspense fallback={...}>
		     <DynamicComponent />
	     </Suspense>
     </>
  };
}

Set the experimental.ppr option in next.config.js to gradually enable PPR:

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

Once PPR has been enabled for each segment, you can set the PPR value to true for the entire application and future routes. Additional details regarding the PPR roadmap can be found in the Next.js 15 GA blog post.

Running Code After a Response with next/after

After the user has received the initial answer, you can do secondary activities like logging, analytics, and synchronisation with external systems using Next.js 15's new experimental next/after API. This prevents the user experience from being slowed down by these processes.

Key Features

Non-blocking Secondary Tasks: Complete tasks without causing a delay in the user's reaction. Enhanced Performance: By finishing the primary response first, the user experience is given priority.

How to Enable:

1. Configure next.config.js.

Add the experimental after option to your configuration file like this:

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


module.exports = nextConfig;

2. Use the API in Your Code.

Import and then use the after function in middleware, server components, actions, or route handlers,.

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

You may guarantee that secondary processes operate effectively without compromising your application's responsiveness by utilising the next/after API. By controlling more processing in the background, this technique enhances the user experience.

create-next-app Updates

To facilitate the development process, the create-next-app command has been updated with a new look and additional features. You will now be asked to enable Turbopack for local development when you launch create-next-app.

npx create-next-app@rc — turbo

Optimizing Bundling of External Packages

Bundling external packages can help your application's cold start performance. In Next.js 15, external packages are automatically included in the App Router. The serverExternalPackages configuration option allows you to disable specified packages.

External packages are not packed by default in the Pages Router, but you can bundle them using the transpilePackages option. The bundlePagesRouterDependencies option emulates the App Router's default automatic bundling to unify configuration between the two.

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

module.exports = nextConfig;

Next.js 15 introduces major improvements and new functionalities, such as compatibility with React 19, the experimental React Compiler, enhanced hydration error management, revised caching defaults, and cutting-edge APIs like next/after and Partial Prerendering. These advancements are designed to simplify the development process and boost performance, equipping developers for the future of web application creation.

What's New In Next 15!