reactCompiler

Next.js 15 introduced support for the React Compiler. The compiler improves performance by automatically optimizing component rendering. This reduces the amount of manual memoization developers have to do through APIs such as useMemo and useCallback.

To use it, upgrade to Next.js 15, install the babel-plugin-react-compiler:

npm install babel-plugin-react-compiler

Then, add experimental.reactCompiler option in next.config.js:

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true,
  },
}
 
export default nextConfig

Note: The React Compiler is currently only possible to use in Next.js through a Babel plugin. This will opt-out of Next.js's default Rust-based compiler, which could result in slower build times. We are working on support for the React Compiler as our default compiler.

Learn more about the React Compiler, and the available Next.js config options.

Annotations

You can configure the compiler to run in "opt-in" mode as follows:

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
}
 
export default nextConfig

Then, you can annotate specific components or hooks with the "use memo" directive from React to opt-in:

export default function Page() {
  'use memo'
  // ...
}

Note: You can also use the "use no memo" directive from React for the opposite effect, to opt-out a component or hook.