reactCompiler

Next.js 支援 React 編譯器，這是一個旨在透過自動最佳化元件渲染來提高效能的工具。它減少了使用 useMemo 和 useCallback 進行手動記憶化的需求。

Next.js 包含一個用 SWC 編寫的自定義效能最佳化功能，它使 React 編譯器更高效。Next.js 不會在每個檔案上執行編譯器，而是分析你的專案，只將 React 編譯器應用於相關檔案。這避免了不必要的工作，與單獨使用 Babel 外掛相比，可以實現更快的構建。

工作原理

React 編譯器透過 Babel 外掛執行。為了保持構建速度，Next.js 使用自定義的 SWC 最佳化，只將 React 編譯器應用於相關檔案，例如包含 JSX 或 React Hooks 的檔案。

這避免了編譯所有內容，並將效能開銷降到最低。與預設的基於 Rust 的編譯器相比，你可能仍然會看到構建速度略慢，但影響很小且是區域性性的。

要使用它，請安裝 babel-plugin-react-compiler

npm install babel-plugin-react-compiler

然後，在 next.config.js 中新增 reactCompiler 選項

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

註解

你可以如下配置編譯器以“選擇加入”模式執行

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

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

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

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