reactCompiler

Next.js bietet Unterstützung für den React Compiler, ein Tool zur Leistungsverbesserung durch automatische Optimierung des Komponenten-Renderings. Dadurch wird der manuelle Einsatz von useMemo und useCallback reduziert.

Next.js enthält eine spezielle Leistungsoptimierung, die in SWC implementiert ist und den React Compiler effizienter macht. Anstatt den Compiler auf jede Datei anzuwenden, analysiert Next.js Ihr Projekt und wendet den React Compiler nur auf relevante Dateien an. Dies vermeidet unnötige Arbeit und führt zu schnelleren Builds im Vergleich zur alleinigen Verwendung des Babel-Plugins.

Funktionsweise

Der React Compiler läuft über ein Babel-Plugin. Um Builds schnell zu halten, verwendet Next.js eine spezielle SWC-Optimierung, die den React Compiler nur auf relevante Dateien anwendet – wie solche mit JSX oder React Hooks.

Dadurch wird vermieden, alles zu kompilieren, und die Leistungseinbußen bleiben minimal. Im Vergleich zum standardmäßigen Rust-basierten Compiler können Builds etwas langsamer sein, aber die Auswirkungen sind gering und lokal begrenzt.

Zur Verwendung 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

Annotationen

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

import type { NextConfig } from 'next'

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

export default nextConfig

Anschließend können Sie spezifische Komponenten oder Hooks mit der "use memo"-Direktive von React annotieren, um sie einzubeziehen:

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

Hinweis: Sie können auch die "use no memo"-Direktive von React für den gegenteiligen Effekt verwenden, um eine Komponente oder einen Hook auszuschließen.