reactCompiler

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

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

Terminal

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.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
}
 
module.exports = nextConfig

オプションとして、コンパイラを「オプトイン」モードで実行するように設定できます：

next.config.ts

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

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
}
 
module.exports = nextConfig

Note: React Compilerは現在、Babelプラグインを通じてNext.jsでのみ使用可能です。これにより、Next.jsのデフォルトのRust製コンパイラからオプトアウトされ、ビルド時間が遅くなる可能性があります。デフォルトのコンパイラとしてReact Compilerのサポートに取り組んでいます。

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