5 amazing new features in the new Next.js 15

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:

JavaScript
npm install babel-plugin-react-compiler

And add this to next.config.js

JavaScript
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.
  • <Link> client-side navigation.

But if you still want to cache fetch():

JavaScript
// `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.

JavaScript
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:

JavaScript
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.
JavaScript
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:

JavaScript
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.



Leave a Comment

Your email address will not be published. Required fields are marked *