Menu

reactCompiler

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

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

仕組み

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

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

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

Terminal
npm install -D babel-plugin-react-compiler

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

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

アノテーション

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

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

その後、Reactの"use memo"ディレクティブを使用して、特定のコンポーネントやHooksにアノテーションを付けることでopt-inできます。

app/page.tsx
TypeScript
export default function Page() {
  'use memo'
  // ...
}

注意： Reactの"use no memo"ディレクティブを使用して、反対の効果を得ることもできます。コンポーネントやHooksをopt-outするために使用できます。