reactCompiler

此功能目前為實驗性功能，可能會有所變動，不建議用於生產環境。請試用並在 GitHub 上分享您的意見回饋。

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 選項

next.config.ts

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

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

註解

您可以設定編譯器以「選擇加入」模式執行，如下所示

next.config.ts

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

然後，您可以使用 React 的 "use memo" 指令註解特定的元件或 Hook 以選擇加入

app/page.tsx

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

注意： 您也可以使用 React 的 "use no memo" 指令來達到相反的效果，以選擇退出元件或 Hook。