What to Expect with Next.js 15

Next.js 15 is a major release that brings significant improvements and new features to the popular React framework. The release candidate (RC) is now available, allowing developers to test the latest updates before the stable release. Here's a breakdown of what to expect with Next.js 15:

React 19 Support

Next.js 15 RC supports the React 19 RC, which includes new features for both the client and server, such as Actions. In our recent article on React 19, we highlighted the new React Compiler feature that promises to significantly boost application performance by optimizing JavaScript code.

To use React 19, you'll need to update your dependencies:

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

Note that some third-party libraries may not be compatible with React 19 yet.

Caching Updates

Next.js 15 changes the default caching behavior for fetch requests, GET Route Handlers, and client navigations. These are now uncached by default, meaning you'll need to opt-in to caching if desired.

To opt-in to caching fetch requests, you can:

- Set the cache option to force-cache in a single fetch call

- Set the dynamic route config option to 'force-static' for a single route

- Set the fetchCache route config option to 'default-cache' to override all fetch requests in a Layout or Page to use force-cache unless they explicitly specify their own cache option.

Partial Prerendering (Experimental)

Partial Prerendering (PPR) allows you to combine static and dynamic rendering on the same page. Next.js 15 introduces an experimental_ppr route config option for opting specific Layouts and Pages into PPR. To use this feature, set the experimental.ppr config in next.config.js to 'incremental'.

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

module.exports = nextConfig;

Here is a code example of how to adopt PPR:

import { Suspense } from 'react';

import { DynamicComponent, StaticComponent } from '@/app/ui';

export const experimental_ppr = true;

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

next/after (Experimental)

The new next/after experimental API allows you to execute code after a response has finished streaming. This is useful for performing tasks like logging, analytics, and external system synchronization without blocking the primary response.

import { unstable_after as after } from 'next/server';
import { record } from '@/app/analytics';
 
export default async function Page() {
  // Secondary task
  // Example: Record a visit
  after(() => {
    record();
  });
 
  // Primary task
  return <div>Page Content</div>;
}

Some common gotchas with next/after include:

after() will execute even if the response doesn't complete successfully, including when an error is thrown or when notFound() or redirect() is called.
after() is a dynamic function that will opt a route into dynamic rendering. This behavior can be overridden with the export dynamic = "force-static" segment config.
You can use React cache to deduplicate functions called inside after().
cookies() cannot be set inside after() since the response has already been sent.
after() can be nested inside other after() calls.

create-next-app Updates

create-next-app has been updated with a new design and a prompt to enable Turbopack for local development. There's also a new --empty flag to create a minimal "hello world" project.

React Compiler (Experimental)

Next.js 15 adds support for the React Compiler, a new experimental compiler created by the React team at Meta. The compiler understands your code at a deep level and can add automatic optimizations, reducing the need for manual memoization.

To use the React Compiler, install babel-plugin-react-compiler and add the experimental.reactCompiler option in next.config.js.

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
 
module.exports = nextConfig;

Improved Hydration Error Messages

Next.js 15 continues to improve hydration error messages, providing more detailed information about the source code of the error and suggestions on how to address the issue.

Optimizing External Package Bundling

Next.js 15 introduces a new bundlePagesRouterDependencies config option to automatically bundle external packages in the Pages Router, similar to the default behavior in the App Router. You can use serverExternalPackages to opt out of specific packages if needed.

Next.js 15 Release Date

If we examine the pattern of past releases, it's reasonable to expect that Next.js 15 will be launched around late October. Historically, new versions have typically been rolled out following the Next.js Conference. Given this consistent scheduling, it's safe to assume that version 15 will follow the same timeline. The Next.js 2024 Conference date has been released, and you can join online or in person on October 24th, 2024, in San Francisco, CA.

Conclusion

Next.js 15 brings several performance improvements, new experimental features, and a better developer experience. The React 19 support, caching updates, and Partial Prerendering enhancements aim to make Next.js even more powerful and efficient for building React applications.

Bring Your Ideas to Life 🚀

If you need help with a Next.js or React project let's get in touch.

Lucky Media is proud to be recognized as a Top Next js Development Agency

Next.js 15: An early look and release date