NextでReact Compilerを有効にする
2024-06-09
6 months ago
開発環境
- next 15.0.0-canary.20
- react 19.0.0-rc-f994737d14-20240522
- babel-plugin-react-compiler 0.0.0-experimental-938cd9a-20240601
前提
ReactCompilerは現時点（2024/6/9時点）では実験的な位置付けです。
公式ドキュメントにも記載ありますが、本番環境で使用できる準備は整っていないとのことです。
本題
1. 新しくプロジェクトを作成する
$ npx create-next-app@canary2. 必要なライブラリをインストールする
$ npm i babel-plugin-react-compiler3. configの設定を追加する
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
reactCompiler: true,
},
};
module.exports = nextConfig;さいごに
まだ実験段階の技術ですが、開発者あれこれやらずとも、パフォーマンス改善を図れるものです。
今後デフォルトで利用される？ことを考えると、これから立ち上げる新しいプロジェクトでは有効にするのも一つの手かと思います。