5 amazing new features in the new Next.js 15

Last updated on June 01, 2024

Next.js 15 is here and things are better than ever!

From a brand new compiler to 700x faster build times, it's never been easier to create full-stack web apps with exceptional performance.

Let's explore the latest features from v15:

1. `create-next-app` upgrades: cleaner UI, 700x faster build

Reformed design

From this:

To this:

Webpack → Turbopack

Turbopack: The fastest module bundler in the world (or so they say):

700x faster than Webpack
10x faster than Vite

And now with v15, adding it to your Next.js project is easier than ever before:

2. React Compiler, React 19 support, and user-friendly errors

React Compiler is a React compiler (who would've thought).

A modern compiler that understands your React code at a deep level.

Bringing optimizations like automatic memoization -- destroying the need for useMemo and useCallback in the vast majority of cases.

Saving time, preventing errors, speeding things up.

And it's really easy to set up: You just install babel-plugin-react-compiler:

npm install babel-plugin-react-compiler

And add this to next.config.js

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

React 19 support

Bringing upgrades like client and server Actions.

Better hydration errors

Dev quality of life means a lot and error message usefulness plays a big part in that.

Next.js 15 sets the bar higher: now making intelligent suggestions on possible ways to fix the error.

Before v15:

Now:

You know I've had a tough time in the past from these hydration errors, so this will certainly be an invaluable one for me.

3. New caching behavior

No more automatic caching!

For all:

fetch() requests
Route handlers: GET, POST, etc.
client-side navigation.

But if you still want to cache fetch():

// `cache` was `no-store` by default before v15
fetch('https://example.com', { cache: 'force-cache' });

Then you can cache the others with some next.config.js options.

4. Partial Prerendering (PPR)

PPR combines static and dynamic rendering in the same page.

Drastically improving performance by loading static HTML instantly and streaming the dynamic parts in the same HTTP request.

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

All you need is this in next.config.js:

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

5. next/after

Next.js 15 gives you a clean way to separate essential from non-essential tasks from every server request:

Essential: Auth checks, DB updates, etc.
Non-essential: Logging, analytics, etc.

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';

export default function Layout({ children }) {
  // Secondary task
  after(() => {
    log();
  });

  // Primary tasks
  // fetch() from DB
  return <>{children}</>;
}

Start using it now with experimental.after:

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

module.exports = nextConfig;

These are just 5 of all the impactful new features from Next.js 15.

Get it now with npx create-next-app@rc and start enjoying radically improved build times and superior developer quality of life.

Try Coding Beauty AI Assistant for VS Code

Meet the new intelligent assistant: tailored to optimize your work efficiency with lightning-fast code completions, intuitive AI chat + web search, reliable human expert help, and more.