reactCompiler

Next.js inclut le support du React Compiler, un outil conçu pour améliorer les performances en optimisant automatiquement le rendu des composants. Cela réduit le besoin de mémoïsation manuelle avec useMemo et useCallback.

Next.js inclut une optimisation de performance personnalisée écrite en SWC qui rend le React Compiler plus efficace. Au lieu d'exécuter le compilateur sur chaque fichier, Next.js analyse votre projet et n'applique le React Compiler qu'aux fichiers pertinents. Cela évite un travail inutile et permet des builds plus rapides par rapport à l'utilisation du plugin Babel seul.

Fonctionnement

Le React Compiler s'exécute via un plugin Babel. Pour maintenir des builds rapides, Next.js utilise une optimisation SWC personnalisée qui n'applique le React Compiler qu'aux fichiers pertinents - comme ceux contenant du JSX ou des Hooks React.

Cela évite de tout compiler et maintient le coût de performance minimal. Vous pourrez tout de même observer des builds légèrement plus lents par rapport au compilateur Rust par défaut, mais l'impact est faible et localisé.

Pour l'utiliser, installez le babel-plugin-react-compiler :

npm install babel-plugin-react-compiler

Puis, ajoutez l'option experimental.reactCompiler dans next.config.js :

import type { NextConfig } from 'next'

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

export default nextConfig

Annotations

Vous pouvez configurer le compilateur pour qu'il fonctionne en mode "opt-in" comme suit :

import type { NextConfig } from 'next'

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

export default nextConfig

Vous pouvez ensuite annoter des composants ou hooks spécifiques avec la directive "use memo" de React pour les inclure :

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

Remarque : Vous pouvez aussi utiliser la directive "use no memo" de React pour l'effet inverse, c'est-à-dire exclure un composant ou hook.