reactCompiler (experimental)

이 기능은 실험적이며 향후 릴리스에서 변경될 수 있습니다.

Next.js 15에서는 React Compiler (opens in a new tab)에 대한 실험적 지원을 도입했습니다. 컴파일러는 컴포넌트 렌더링을 자동으로 최적화하여 성능을 향상시킵니다. 이를 통해 useMemo와 useCallback과 같은 API를 통해 개발자가 해야 하는 수동 메모이제이션의 양을 줄일 수 있습니다.

사용하려면 Next.js 15로 업그레이드하고 babel-plugin-react-compiler를 설치하세요:

Terminal

npm install babel-plugin-react-compiler

그런 다음, next.config.js에 experimental.reactCompiler 옵션을 추가하세요:

next.config.js

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

선택적으로, 컴파일러를 "옵트인" 모드로 실행하도록 구성할 수 있습니다:

next.config.ts

const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
}
 
module.exports = nextConfig

참고: 현재 React Compiler는 Babel 플러그인을 통해서만 Next.js에서 사용할 수 있습니다. 이는 Next.js의 기본 Rust 기반 컴파일러를 제외시켜 빌드 시간이 느려질 수 있습니다. 우리는 React Compiler를 기본 컴파일러로 지원하기 위해 작업 중입니다.

React Compiler (opens in a new tab) 및 사용 가능한 Next.js 구성 옵션 (opens in a new tab)에 대해 자세히 알아보세요.

productionBrowserSourceMaps reactStrictMode