reactCompiler

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

利用するには、Next.js 15 にアップグレードし、babel-plugin-react-compiler をインストールしてください：

Terminal

npm install babel-plugin-react-compiler

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

TypeScript
JavaScript

next.config.ts
import type { NextConfig } from 'next'

// experimental オプションに reactCompiler を true に設定
const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true,
  },
}

export default nextConfig

next.config.js
/** @type {import('next').NextConfig} */
// experimental オプションに reactCompiler を true に設定
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
}

module.exports = nextConfig

オプションで、"opt-in" モードでコンパイラを実行するように設定できます：

TypeScript
JavaScript

next.config.ts
import type { NextConfig } from 'next'

// experimental オプションに reactCompiler と compilationMode を設定
const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
}

export default nextConfig

next.config.js
/** @type {import('next').NextConfig} */
// experimental オプションに reactCompiler と compilationMode を設定
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
}

module.exports = nextConfig

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

React Compiler および Next.js で利用可能な設定オプションについて詳しく学びましょう。