Next.js 15 is an absolute game changer😲
Next.js 15 is officially 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. TypeScript configs — next.config.ts
With Next.js 15 you can finally create config files in TypeScript directly:
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;The NextConfig type enables editor intellisense for every possible option.
3. 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-compilerAnd 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.
4. 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():
// `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.
5. 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;6. 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.
