🚀 What's Coming in Next.js 15?

The Next.js 15 Release Candidate (RC) is now available. This early version allows you to test the latest features before the upcoming stable release.

Getting Started

To try out Next.js 15, run:

pnpx create-next-app@rc

and follow the prompts to generate a new project. You can also upgrade an existing project by updating your next dependency to 15.0.0-rc and following the migration guide.

React Compiler (Experimental)

The React Compiler is a major new feature in React 19, enabling automatic optimizations and reducing the need for manual memoization with hooks like useMemo and useCallback. This can simplify your code and improve maintainability.

Next.js 15 supports the React Compiler via a Babel plugin:

1. Install the plugin:

   pnpm add -D babel-plugin-react-compiler

2. Enable the compiler in your next.config.mjs:

   const nextConfig = {
     experimental: {
       reactCompiler: true,
     },
   }
   export default nextConfig

   Or, for opt-in compilation using the "use memo" directive:

   const nextConfig = {
     experimental: {
       reactCompiler: {
         compilationMode: 'annotation',
       },
     },
   }
   export default nextConfig

   Annotate components or hooks to opt-in:

   export default function App() {
     'use memo'
     // ...
   }

Hydration Error Improvements

Next.js 14.1 improved error messages for hydration issues, but Next.js 15 goes further. Hydration errors now display the relevant source code and provide actionable suggestions, making debugging much easier.

Before (Next.js 14.1):

After (Next.js 15 RC):

Caching Updates

Next.js 15 changes the default caching behavior for fetch requests, GET Route Handlers, and the Client Router Cache. By default, these are no longer cached unless you explicitly opt in. This gives you more control and helps avoid stale data.

fetch Requests

In Next.js 15, server-side fetch requests are not cached by default. You must specify the cache mode if you want caching:

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

• no-store (default): Always fetch from the remote server.
• force-cache: Use the cache if available, otherwise fetch and cache.

GET Route Handlers

Route Handlers using the GET method are not cached by default. To opt in to static caching, use:

export const dynamic = 'force-static'

Special files like sitemap.ts, opengraph-image.tsx, and icon.tsx remain static by default unless they use dynamic features.

Client Router Cache

The client router cache no longer caches Page components by default (staleTime is now 0). This ensures users always see the latest data when navigating. However:

• Shared layout data is not refetched to support partial rendering.
• Cache is still used for back/forward navigation to maintain scroll position.
• The Loading.js file is cached for 5 minutes or as configured.

To restore previous caching behavior, set:

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
}
export default nextConfig

Incremental Adoption of Partial Prerendering (Experimental)

Partial Prerendering (PPR) allows you to combine static and dynamic rendering on the same page. In Next.js 15, you can incrementally adopt PPR by enabling it for specific layouts or pages:

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

Enable incremental PPR in your config:

const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}
export default nextConfig

Executing Code After a Response with next/after (Experimental)

The new after() API allows you to schedule work (like logging, analytics, or syncing with external systems) to run after the response has finished streaming. This is especially useful in serverless environments where computation usually stops immediately after the response.

Enable in your config:

const nextConfig = {
  experimental: {
    after: true,
  },
}
export default nextConfig

Usage example:

import { unstable_after as after } from 'next/server'
import { log } from '@/app/utils'
export default function Layout({ children }) {
  after(() => {
    log()
  })
  return <>{children}</>
}

Changes to create-next-app

• Minimalist template: The default template is now more minimal.
• Turbopack prompt: When running create-next-app, you’ll be prompted to enable Turbopack for development (defaults to No).
• Empty flag: Use --empty to generate a minimal "hello world" project with no extra files or styles.

pnpx create-next-app@rc --empty

Optimizing Bundling of External Packages (Stable)

• App Router: External packages are bundled by default. You can opt out specific packages using the new serverExternalPackages config option.
• Pages Router: External packages are not bundled by default, but you can specify packages to bundle using transpilePackages.

Bundling external packages can improve cold start performance, especially in serverless environments.

Other Notable Improvements

• React 19 RC support: Next.js 15 is compatible with the latest React 19 RC, unlocking new React features.
• Improved error overlays: Error overlays are more informative and actionable.
• Better TypeScript support: Type checking and type inference have been improved.
• Performance enhancements: Faster builds and improved serverless cold starts.

Summary

• React: Support for React 19 RC, React Compiler (Experimental), and improved hydration error messages.
• Caching: fetch requests, GET Route Handlers, and client navigations are no longer cached by default.
• Partial Prerendering: Incremental adoption with new config options.
• next/after: New API to execute code after a response has finished streaming.
• create-next-app: Updated design, Turbopack prompt, and new --empty flag.
• Bundling: New config options for App and Pages Router to optimize external package bundling.

Additional Information

• Next.js 15 Full Tutorial - Beginner to Advanced
• Next.js 15 Release Notes
• Next.js Documentation