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

注意：目前在 Next.js 中只能透過 Babel 外掛程式使用 React 編譯器。這將停用 Next.js 預設的基於 Rust 的編譯器，這可能會導致建置時間變慢。我們正在努力將 React 編譯器作為我們的預設編譯器。

深入瞭解 React 編譯器以及可用的 Next.js 設定選項。

這有幫助嗎？