reactCompiler

Next.js 15 RC führte Unterstützung für den React Compiler ein. Der Compiler verbessert die Leistung, indem er das Komponentenrendering automatisch optimiert. Dies reduziert die Menge an manueller Memoization, die Entwickler über APIs wie useMemo und useCallback durchführen müssen.

Um ihn zu verwenden, aktualisieren Sie auf Next.js 15 und installieren Sie das babel-plugin-react-compiler:

npm install babel-plugin-react-compiler

Fügen Sie dann die Option experimental.reactCompiler in next.config.js hinzu:

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

Optional können Sie den Compiler im "Opt-in"-Modus wie folgt konfigurieren:

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

Hinweis: Der React Compiler kann derzeit in Next.js nur über ein Babel-Plugin verwendet werden. Dies bedeutet einen Verzicht auf Next.js' standardmäßigen Rust-basierten Compiler, was zu längeren Buildzeiten führen könnte. Wir arbeiten an der Unterstützung des React Compilers als Standardcompiler.

Erfahren Sie mehr über den React Compiler und die verfügbaren Next.js-Konfigurationsoptionen.