reactCompiler

Next.js incluye soporte para el Compilador de React, una herramienta diseñada para mejorar el rendimiento optimizando automáticamente el renderizado de componentes. Esto reduce la necesidad de memoización manual usando useMemo y useCallback.

Next.js incluye una optimización de rendimiento personalizada escrita en SWC que hace el Compilador de React más eficiente. En lugar de ejecutar el compilador en cada archivo, Next.js analiza tu proyecto y solo aplica el Compilador de React a los archivos relevantes. Esto evita trabajo innecesario y resulta en builds más rápidos comparado con usar el plugin de Babel por sí solo.

Cómo funciona

El Compilador de React se ejecuta a través de un plugin de Babel. Para mantener los builds rápidos, Next.js usa una optimización personalizada con SWC que solo aplica el Compilador de React a archivos relevantes—como aquellos con JSX o Hooks de React.

Esto evita compilar todo y mantiene el costo de rendimiento al mínimo. Aún podrías ver builds ligeramente más lentos comparado con el compilador basado en Rust por defecto, pero el impacto es pequeño y localizado.

Para usarlo, instala el babel-plugin-react-compiler:

npm install babel-plugin-react-compiler

Luego, agrega la opción experimental.reactCompiler en next.config.js:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true,
  },
}

export default nextConfig

Anotaciones

Puedes configurar el compilador para que se ejecute en modo "opt-in" de la siguiente manera:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
}

export default nextConfig

Luego, puedes anotar componentes o hooks específicos con la directiva "use memo" de React para optar por participar:

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

Nota: También puedes usar la directiva "use no memo" de React para el efecto contrario, para excluir un componente o hook.