Next.js 15 New Features - Turbopack Now Stable

Next.js 15 Released

Next.js 15 was released in October 2024. It includes many new features and improvements such as React 19 support, Turbopack stabilization, and Partial Prerendering.

Upgrade Tip: Auto-migration is available with npx @next/codemod@canary upgrade latest. It automates checking and fixing breaking changes.

Key New Features

1. Turbopack Now Stable

Turbopack, the new bundler written in Rust, is now stable for next dev.

# Start dev server with Turbopack
next dev --turbo

2. React 19 Support

React 19 is now officially supported with new React APIs available.

// useActionState with Server Actions
import { useActionState } from 'react';

function Form() {
  const [state, formAction, isPending] = useActionState(
    async (prevState, formData) => {
      const result = await submitForm(formData);
      return result;
    },
    null
  );

  return (
    <form action={formAction}>
      <input name="email" type="email" />
      <button disabled={isPending}>
        {isPending ? 'Submitting...' : 'Submit'}
      </button>
      {state?.error && <p>{state.error}</p>}
    </form>
  );
}

3. Partial Prerendering (PPR)

A new rendering strategy that pre-renders a static shell and streams in dynamic parts.

// next.config.js
module.exports = {
  experimental: {
    ppr: 'incremental'
  }
}

// page.tsx - Enable per route
export const experimental_ppr = true;

export default async function Page() {
  return (
    <>
      {/* Statically prerendered */}
      <Header />

      {/* Dynamically streamed */}
      <Suspense fallback={<Loading />}>
        <DynamicContent />
      </Suspense>
    </>
  );
}

PPR Benefits: Combines static site speed with dynamic content flexibility. TTFB (Time To First Byte) is significantly improved.

4. Introduction of next/after

A new API to define processing that executes after sending the response.

import { after } from 'next/server';

export async function POST(request) {
  const data = await request.json();

  // Return response first
  const response = Response.json({ success: true });

  // Execute after response (logging, etc.)
  after(async () => {
    await logAnalytics(data);
    await updateMetrics();
  });

  return response;
}

Breaking Changes

1. fetch/GET/HEAD Caching Off by Default

// v14: Cached by default
// v15: No cache by default

// Explicitly enable caching
fetch(url, { cache: 'force-cache' });

2. React 18 Support Ended

Next.js 15 requires React 19. If you’re using React 18, you need to upgrade to React 19.

3. Async Request APIs

cookies(), headers(), params, and searchParams are now async.

// v14
export default function Page({ params }) {
  const { id } = params;
  return <div>ID: {id}</div>;
}

// v15
export default async function Page({ params }) {
  const { id } = await params;  // await required
  return <div>ID: {id}</div>;
}

Upgrade Steps

1. Run auto-migration tool

npx @next/codemod@canary upgrade latest

2. Update dependencies

npm install next@15 react@19 react-dom@19

3. Handle async API changes

# Auto-convert with codemods
npx @next/codemod@canary next-async-request-api .

Summary

Next.js 15 has evolved significantly in both performance and DX. Key points:

• Turbopack Stable: Dramatically faster builds during development
• React 19 Support: New React APIs available
• PPR: Best of both static and dynamic worlds
• Cache Rethink: More semantic default behavior

While there are many breaking changes, using the auto-migration tool makes upgrading relatively smooth.