reactCompiler

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

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

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

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

アノテーション

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

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

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

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

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