Skip to main content
Chapter 1 Next.js 15 Foundations

What Is New in Next.js 15

16 min read Lesson 1 / 28 Free Preview

Welcome to Next.js 15

Next.js 15 is a landmark release that solidifies the App Router as the standard way to build React applications. Released in October 2024, it ships with React 19 support, a completely revamped caching model, Partial Prerendering reaching stable status, and critical developer experience improvements.

Key Changes in Next.js 15

Caching Defaults Changed — The most impactful breaking change. Fetch requests, GET route handlers, and client-side navigations are now uncached by default. You opt in to caching explicitly, which prevents the confusing stale-data bugs common in Next.js 14.

// Next.js 14 — cached by default (often surprising)
const data = await fetch('/api/posts');

// Next.js 15 — uncached by default (explicit control)
const data = await fetch('/api/posts', { cache: 'force-cache' });
const fresh = await fetch('/api/posts'); // no-store behavior

React 19 Support — Server Components, Server Actions, useFormState replaced by useActionState, and the new use() hook for reading promises in render.

Partial Prerendering (Stable) — Serve a static shell instantly while streaming in dynamic content. No configuration needed — wrap dynamic content in <Suspense>:

export const experimental_ppr = true;

export default function Page() {
    return (
        <main>
            <StaticHero />         {/* Prerendered */}
            <Suspense fallback={<Skeleton />}>
                <DynamicFeed />    {/* Streamed */}
            </Suspense>
        </main>
    );
}

Turbopack (Stable for Development) — The Rust-based bundler is now stable for next dev --turbopack, delivering up to 76% faster local server startup and 96% faster HMR.

after() API — Execute code after a response has been sent without delaying the user:

import { after } from 'next/server';

export async function POST(request: Request) {
    const data = await request.json();
    after(() => {
        logAnalyticsEvent('form_submitted', data);
    });
    return Response.json({ success: true });
}

Why Next.js for Full-Stack?

Next.js collocates your frontend and backend in a single project. Server Components fetch data without a separate API. Server Actions handle form submissions without client-side JavaScript. This reduces roundtrips, eliminates prop drilling, and ships less JavaScript to the browser.