Skip to content

Commit 3a46a6e

Browse files
authored
Update instructions for setting up the React Compiler in Next.js (#6877)
1 parent 4e3d63a commit 3a46a6e

File tree

1 file changed

+30
-1
lines changed

1 file changed

+30
-1
lines changed

src/content/learn/react-compiler.md

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,36 @@ export default defineConfig(() => {
178178

179179
### Usage with Next.js {/*usage-with-nextjs*/}
180180

181-
Next.js allows for a slower build pipeline via Babel, which can be enabled by [configuring Babel](#usage-with-babel) by adding a `babel.config.js` file.
181+
Next.js has an experimental configuration to enable the React Compiler. It automatically ensures Babel is set up with `babel-plugin-react-compiler`.
182+
183+
- Install Next.js canary, which uses React 19 Release Candidate
184+
- Install `babel-plugin-react-compiler`
185+
186+
<TerminalBlock>
187+
npm install next@canary babel-plugin-react-compiler
188+
</TerminalBlock>
189+
190+
Then configure the experimental option in `next.config.js`:
191+
192+
```js {4,5,6}
193+
// next.config.js
194+
/** @type {import('next').NextConfig} */
195+
const nextConfig = {
196+
experimental: {
197+
reactCompiler: true,
198+
},
199+
};
200+
201+
export default nextConfig;
202+
```
203+
204+
Using the experimental option ensures support for the React Compiler in:
205+
206+
- App Router
207+
- Pages Router
208+
- Webpack (default)
209+
- Turbopack (opt-in through `--turbo`)
210+
182211

183212
### Usage with Remix {/*usage-with-remix*/}
184213
Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:

0 commit comments

Comments
 (0)