Next.js 16: what's new?

Vercel has finally released Next.js 16 in beta! 🎉 Next.js 16 includes several new features and improvements, especially in the area of build and development performance, which is one of the most frequents complaints about Next.js.

Here are some of the key changes in Next.js 16:

1. Improved Turbopack: In Next.js 16, Turbopack will be even faster thanks to File System caching, and is now enabled by default for development builds. This means that you will see a significant improvement in the performance of your application when using Turbopack 🚀
2. React 19.2: Next.js 16 uses React 19.2 by default, which brings welcome features such as <Activity>, useEffectEvent, a stable React Compiler, and more. The new EsLint rules are a bit stricter and may help catch some bugs, but not everyone may like them.
3. React Compiler: The React Compiler is now stable and has been moved outside the experimental phase. It is still disabled by default.
4. No more middleware?: Well, not exactly. It's been renamed to proxy. Perhaps we will get a "real" middleware API in the future?
5. Caching: Cache Components (previously named PPR) are getting nearer to being production-ready. Also, Next.js adds the new updateTag() and an improved revalidateTag() to allow you to control the caching of your application more precisely.
6. Smoother Routing: Routing should feel faster and smoother thanks to layout deduplication and incremental pre-fetching.

Let's take an in-depth look at some of the new features in Next.js 16, and how they may impact your project, and how Makerkit approached the migration.

Improved Turbopack

Turbopack is the new Rust-based bundler that powers Next.js 16, the spiritual and modern successor of Webpack.

While already available in Next.js, Turbopack is still a work in progress - showing both great promise that have been very eagerly awaited by all the Next.js community.

Aside from general performance improvements that come out of the box, Turbopack now supports experimental File System caching (behind an experimental flag), which means that your application will be faster to build and start, and it will also be faster to reload during development.

While you should see significant performance improvements out of the box, you can opt-in to using the new file system caching (and therefore even further improved performance) by updating your next.config file to the following:

export default {
  experimental: {
    turbopackFileSystemCacheForDev: true,
    turbopackFileSystemCacheForBuild: true,
  },
};

As this is an experimental feature, it is not enabled by default and you should look out for any issues.

Next.js 16 vs Next.js 15 benchmarks

We've run some benchmarks to compare the performance of Next.js 16 with the previous version of Next.js 15, including startup time, navigation time and production build time for both Webpack and Turbopack. We used the Makerkit SaaS Kit for the benchmarks.

The benchmarks were run on a MacBook Pro with a M3 Max chip and 36GB of RAM in high performance mode.

Startup time

The startup time has seen significant improvements in Next.js 16, with a 44% faster startup (603ms vs 1083ms):

Navigation performance

Navigation times have improved across most routes in Next.js 16:

Production build

Build times show dramatic improvements, with Turbopack being 2.6x faster than Webpack:

Is it as buttery smooth as Vite? Maybe not yet, but it's getting closer and closer - and it's finally a good development experience.

I will update the benchmarks with the final release of Next.js 16 when it's released.

React 19.2

Next.js updates its bundled React version to 19.2. This is a major update to React that includes several new features and improvements, such as <Activity>, useEffectEvent, and more.

We wrote a detailed article about React 19.2 and the new changes in the React eslint rules. I highly recommend reading it to understand the new features and improvements in React 19.2.

React Compiler

With the React Compiler becoming stable, Next.js is also moving it outside the experimental phase.

It is still disabled by default, as you should pay attention that both your code and the libraries you use are compatible with it.

To enable it, you can set the reactCompiler flag to true in your next.config.mjs file:

export default {
  reactCompiler: true,
};

Makerkit is fully compatible with the React Compiler, so you're free to enable it in your project.

We keep it disabled by default as it may introduce performance regressions - and generally the Makerkit SaaS Kit (mostly server-side rendered) will not benefit particularly from it, so you may want to keep it disabled unless your codebase contains complex, performance-critical components.

Proxy replaces middleware

The Next.js middleware has been renamed to proxy. So, instead of using a ./middleware.ts file, you now should use a ./proxy.ts file.

It's a deprecation, not a removal, so you can still use it, but we at Makerkit have already made the migration to the new proxy convention, so you may encounter merge conflicts if you've changed the middleware file.

Nothing changes in terms of functionality, but the name is more descriptive about what it does. The proxy.ts file replaces the middleware.ts file and it either needs to export a default function or a function named proxy.

Hopefully this paves the way for a proper Middleware API in the future - a sorely missed feature in Next.js.

Conclusion

Next.js 16 is a major release that includes several new features and improvements, especially in the area of build and development performance.

We've seen significant improvements in startup time, navigation time and production build time, with Turbopack being 2.6x faster than Webpack.

The React Compiler is now stable and has been moved outside the experimental phase. If your codebase contains complex, performance-critical components, you may want to enable it to see if it improves the performance of your application.

Our Next.js SaaS Starter Kit update to Next.js 16 is available for testing in an experimental branch and will be released as soon as Next.js 16 is officially released. Watch this space for updates! 🔥

Reosurces

• Next.js 16 Beta Release Announcement
• React 19.2 Release Announcement
• React Compiler