reactCompiler

Next.js 15 RC 引入了对 React 编译器的支持。编译器通过自动优化组件渲染来提升性能。这减少了开发者需要通过 useMemo 和 useCallback 等 API 进行的手动记忆化操作。

要使用它，请升级到 Next.js 15，并安装 babel-plugin-react-compiler：

Terminal

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.js

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

你也可以选择将编译器配置为"选择性加入"模式，如下所示：

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

**注意：**目前只能通过 Babel 插件在 Next.js 中使用 React 编译器。这将退出 Next.js 默认的基于 Rust 的编译器，这可能会导致构建时间变慢。我们正在努力将 React 编译器作为我们的默认编译器。

了解更多关于 React 编译器和可用的 Next.js 配置选项的信息。