reactCompiler

Next.js включает поддержку React Compiler — инструмента, предназначенного для повышения производительности за счёт автоматической оптимизации рендеринга компонентов. Это уменьшает необходимость ручной мемоизации с использованием useMemo и useCallback.

Next.js содержит специальную оптимизацию производительности, написанную на SWC, которая делает React Compiler более эффективным. Вместо запуска компилятора для каждого файла, Next.js анализирует ваш проект и применяет React Compiler только к соответствующим файлам. Это позволяет избежать ненужной работы и приводит к более быстрой сборке по сравнению с использованием плагина Babel отдельно.

Как это работает

React Compiler работает через плагин Babel. Для ускорения сборки Next.js использует специальную оптимизацию SWC, которая применяет React Compiler только к соответствующим файлам — например, содержащим JSX или React хуки.

Это позволяет избежать компиляции всего подряд и минимизирует влияние на производительность. Вы можете заметить небольшое замедление сборки по сравнению со стандартным компилятором на Rust, но это влияние незначительно и локализовано.

Для использования установите babel-plugin-react-compiler:

npm install babel-plugin-react-compiler

Затем добавьте опцию experimental.reactCompiler в 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

Аннотации

Вы можете настроить компилятор для работы в режиме "опционального включения" следующим образом:

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

Затем вы можете аннотировать конкретные компоненты или хуки директивой "use memo" из React для их включения:

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

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

Примечание: Вы также можете использовать директиву "use no memo" из React для обратного эффекта — исключения компонента или хука из оптимизации.