reactCompiler

Next.js には、コンポーネントのレンダリングを自動的に最適化することでパフォーマンスを向上させるツールである React Compiler が組み込まれています。これにより、useMemo および useCallback を使用した手動のメモ化の必要性が軽減されます。

Next.js は、React Compiler をより効率的にする SWC で書かれたカスタムパフォーマンス最適化を組み込んでいます。コンパイラをすべてのファイルで実行するのではなく、Next.js はプロジェクトを分析し、関連ファイルにのみ React Compiler を適用します。これにより、不要な作業が回避され、Babel プラグインを単独で使用する場合と比較してビルドが高速になります。

仕組み

React Compiler は Babel プラグインを通じて実行されます。ビルドを高速に保つために、Next.js はカスタム SWC 最適化を使用し、JSX や React Hooks を含むファイルにのみ React Compiler を適用します。

これにより、すべてのコンパイルが回避され、パフォーマンスコストが最小限に抑えられます。デフォルトの Rust ベースのコンパイラと比較してビルドがわずかに遅くなる可能性がありますが、影響は小さく限定的です。

使用するには、babel-plugin-react-compiler をインストールします。

npm install babel-plugin-react-compiler

次に、next.config.js で reactCompiler オプションを追加します。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  reactCompiler: true,
}
 
export default nextConfig

アノテーション

コンパイラを「オプトイン」モードで実行するように設定できます。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  reactCompiler: {
    compilationMode: 'annotation',
  },
}
 
export default nextConfig

次に、React の "use memo" ディレクティブを使用して、特定のコンポーネントまたはフックにアノテーションを付けてオプトインできます。

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

注: 反対の効果、つまりコンポーネントまたはフックのオプトアウトには、React の "use no memo" ディレクティブを使用することもできます。