reactCompiler

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

使用するには、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'

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true,
  },
}

export default nextConfig

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

module.exports = nextConfig

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

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

アノテーション

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

TypeScript
JavaScript

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

次に、特定のコンポーネントやフックに対してReactの"use memo"ディレクティブを使用してオプトインできます：

TypeScript
JavaScript

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

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

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

アノテーション​

アノテーション