コンテンツにスキップ

reactCompiler

...このAPIは現在実験段階であり、変更される可能性があります。

Next.js 15 RCでは、Reactコンパイラ...のサポートが導入されました。コンパイラは、コンポーネントのレンダリングを自動的に最適化することでパフォーマンスを向上させます。これにより、開発者が`useMemo`や`useCallback`などのAPIを通じて手動で行うメモ化の量が削減されます。

使用するには、Next.js 15にアップグレードし、`babel-plugin-react-compiler`をインストールします。

ターミナル
npm install babel-plugin-react-compiler

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

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

必要に応じて、コンパイラが「オプトイン」モードで実行されるように次のように設定できます。

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

**注:** Reactコンパイラは現在、Babelプラグインを通じてのみNext.jsで使用できます。これは、Next.jsのデフォルトのRustベースのコンパイラをオプトアウトするため、ビルド時間が遅くなる可能性があります。Reactコンパイラをデフォルトのコンパイラとしてサポートする作業を進めています。

Reactコンパイラ...と、利用可能なNext.js設定オプション...の詳細をご覧ください。