reactCompiler

Next.js は React Compiler をサポートしており、コンポーネントのレンダリングを自動的に最適化することでパフォーマンスを向上させます。これにより、useMemo や useCallback を使った手動のメモ化が必要なくなります。

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

動作原理

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

これにより、すべてをコンパイルすることを避け、パフォーマンスコストを最小限に抑えます。デフォルトの Rust ベースのコンパイラと比べてビルドが若干遅くなる場合がありますが、その影響は小さく局所的です。

使用するには、babel-plugin-react-compiler をインストールしてください:

Terminal

npm install babel-plugin-react-compiler

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

import type { NextConfig } from 'next'

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

export default nextConfig

アノテーション

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

import type { NextConfig } from 'next'

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

export default nextConfig

その後、React の "use memo" ディレクティブを使用して、特定のコンポーネントやフックをオプトインできます:

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

注: 逆の効果を得るために、コンポーネントやフックをオプトアウトする "use no memo" ディレクティブも使用できます。

動作原理

アノテーション

On this page