reactCompiler.mdx

title	description	version
reactCompiler	Enable the React Compiler to automatically optimize component rendering.	experimental

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
}

module.exports = 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.

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
}

module.exports = 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'
  // ...
}

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.