[cna] Add reactCompiler option

This PR adds a new `reactCompiler` option to create-next-app. To provide
more time for build perf measurements, this option defaults to "no" for
now.

When React Compiler is enabled, create-next-app will:

1. Add the experimental config enabling the compiler to next.config
2. Install babel-plugin-react-compiler, pinned to the latest rc 19.1.0-rc.2

Test plan:

Double checked that the generated next.config.ts contains the flag and
that babel-plugin-react-compiler was installed as a devDep.

**OFF**

```
$ pnpm build
$ dist/index.js

✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use React Compiler (Release Candidate)? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/laurentan/code/next.js/packages/create-next-app/my-app.

Using npm.

Initializing project with template: app-tw

Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc

<snip>

Success! Created my-app at my-app
```

**ON**
```
$ pnpm build
$ dist/index.js

✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use React Compiler (Release Candidate)? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/laurentan/code/next.js/packages/create-next-app/my-app.

Using npm.

Initializing project with template: app-tw

Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- babel-plugin-react-compiler
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc

<snip>

Success! Created my-app at my-app
```

Author: poteto

packages/create-next-app/create-app.ts

@@ -42,6 +42,7 @@ export async function createApp({
   turbopack,
   rspack,
   disableGit,
+  reactCompiler,
 }: {
   appPath: string
   packageManager: PackageManager
@@ -60,6 +61,7 @@ export async function createApp({
   turbopack: boolean
   rspack: boolean
   disableGit?: boolean
+  reactCompiler: boolean
 }): Promise<void> {
   let repoInfo: RepoInfo | undefined
   const mode: TemplateMode = typescript ? 'ts' : 'js'
@@ -252,6 +254,7 @@ export async function createApp({
       skipInstall,
       turbopack,
       rspack,
+      reactCompiler,
     })
   }
 

packages/create-next-app/index.ts

@@ -49,6 +49,7 @@ const program = new Command(packageJson.name)
   .option('--ts, --typescript', 'Initialize as a TypeScript project. (default)')
   .option('--js, --javascript', 'Initialize as a JavaScript project.')
   .option('--tailwind', 'Initialize with Tailwind CSS config. (default)')
+  .option('--react-compiler', 'Initialize with React Compiler enabled.')
   .option('--eslint', 'Initialize with ESLint config.')
   .option('--biome', 'Initialize with Biome config.')
   .option('--app', 'Initialize as an App Router project.')
@@ -239,6 +240,7 @@ async function run(): Promise<void> {
       empty: false,
       turbopack: true,
       disableGit: false,
+      reactCompiler: false,
     }
     const getPrefOrDefault = (field: string) =>
       preferences[field] ?? defaults[field]
@@ -346,6 +348,30 @@ async function run(): Promise<void> {
       preferences.eslint = false
     }
 
+    if (
+      !opts.reactCompiler &&
+      !args.includes('--no-react-compiler') &&
+      !opts.api
+    ) {
+      if (skipPrompt) {
+        opts.reactCompiler = getPrefOrDefault('reactCompiler')
+      } else {
+        const styledReactCompiler = blue('React Compiler')
+        const { reactCompiler } = await prompts({
+          onState: onPromptState,
+          type: 'toggle',
+          name: 'reactCompiler',
+          // TODO: Remove "Release Candidate" when React Compiler is stable
+          message: `Would you like to use ${styledReactCompiler} (Release Candidate)?`,
+          initial: getPrefOrDefault('reactCompiler'),
+          active: 'Yes',
+          inactive: 'No',
+        })
+        opts.reactCompiler = Boolean(reactCompiler)
+        preferences.reactCompiler = Boolean(reactCompiler)
+      }
+    }
+
     if (!opts.tailwind && !args.includes('--no-tailwind') && !opts.api) {
       if (skipPrompt) {
         opts.tailwind = getPrefOrDefault('tailwind')
@@ -486,6 +512,7 @@ async function run(): Promise<void> {
       turbopack: opts.turbopack,
       rspack: opts.rspack,
       disableGit: opts.disableGit,
+      reactCompiler: opts.reactCompiler,
     })
   } catch (reason) {
     if (!(reason instanceof DownloadError)) {
@@ -520,6 +547,7 @@ async function run(): Promise<void> {
       turbopack: opts.turbopack,
       rspack: opts.rspack,
       disableGit: opts.disableGit,
+      reactCompiler: opts.reactCompiler,
     })
   }
   conf.set('preferences', preferences)

packages/create-next-app/templates/index.ts

@@ -47,6 +47,7 @@ export const installTemplate = async ({
   skipInstall,
   turbopack,
   rspack,
+  reactCompiler,
 }: InstallTemplateArgs) => {
   console.log(bold(`Using ${packageManager}.`));
 
@@ -96,6 +97,28 @@ export const installTemplate = async ({
     );
   }
 
+  if (reactCompiler) {
+    const nextConfigFile = path.join(
+      root,
+      mode === "js" ? "next.config.mjs" : "next.config.ts",
+    );
+    let configContent = await fs.readFile(nextConfigFile, "utf8");
+
+    if (mode === "ts") {
+      configContent = configContent.replace(
+        "const nextConfig: NextConfig = {\n  /* config options here */\n};",
+        `const nextConfig: NextConfig = {\n  reactCompiler: true,\n};`,
+      );
+    } else {
+      configContent = configContent.replace(
+        "const nextConfig = {};",
+        `const nextConfig = {\n  reactCompiler: true,\n};`,
+      );
+    }
+
+    await fs.writeFile(nextConfigFile, configContent);
+  }
+
   const tsconfigFile = path.join(
     root,
     mode === "js" ? "jsconfig.json" : "tsconfig.json",
@@ -223,6 +246,11 @@ export const installTemplate = async ({
     }
   }
 
+  if (reactCompiler) {
+    // TODO: Use "^19" when React Compiler is stable
+    packageJson.devDependencies["babel-plugin-react-compiler"] = "19.1.0-rc.3";
+  }
+
   /**
    * TypeScript projects will have type definitions and other devDependencies.
    */

packages/create-next-app/templates/types.ts

@@ -33,4 +33,5 @@ export interface InstallTemplateArgs {
   skipInstall: boolean;
   turbopack: boolean;
   rspack: boolean;
+  reactCompiler: boolean;
 }

test/integration/create-next-app/biome-config.test.ts

@@ -31,6 +31,7 @@ describe('create-next-app Biome configuration', () => {
           '--app',
           '--no-turbopack',
           '--no-import-alias',
+          '--no-react-compiler',
           '--skip-install',
         ],
         nextTgzFilename,
@@ -59,6 +60,7 @@ describe('create-next-app Biome configuration', () => {
           '--app',
           '--no-turbopack',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         nextTgzFilename,
         { cwd }
@@ -95,6 +97,7 @@ describe('create-next-app Biome configuration', () => {
           '--app',
           '--no-turbopack',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         nextTgzFilename,
         { cwd }
@@ -131,6 +134,7 @@ describe('create-next-app Biome configuration', () => {
           '--app',
           '--no-turbopack',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         nextTgzFilename,
         { cwd }
@@ -167,6 +171,7 @@ describe('create-next-app Biome configuration', () => {
           '--app',
           '--no-turbopack',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         nextTgzFilename,
         { cwd }

test/integration/create-next-app/eslint-config.test.ts

@@ -28,6 +28,7 @@ describe('create-next-app ESLint configuration', () => {
           '--eslint',
           '--no-tailwind',
           '--no-src-dir',
+          '--no-react-compiler',
           '--app',
           '--no-turbopack',
           '--no-import-alias',
@@ -76,6 +77,7 @@ describe('create-next-app ESLint configuration', () => {
           '--eslint',
           '--no-tailwind',
           '--no-src-dir',
+          '--no-react-compiler',
           '--app',
           '--no-turbopack',
           '--no-import-alias',

test/integration/create-next-app/index.test.ts

@@ -39,6 +39,7 @@ describe('create-next-app', () => {
           '--no-tailwind',
           '--no-src-dir',
           '--no-import-alias',
+          '--no-react-compiler',
           ...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
         ],
         nextTgzFilename,
@@ -81,6 +82,7 @@ describe('create-next-app', () => {
           '--no-tailwind',
           '--no-src-dir',
           '--no-import-alias',
+          '--no-react-compiler',
           ...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
         ],
         nextTgzFilename,
@@ -113,6 +115,7 @@ describe('create-next-app', () => {
           '--no-src-dir',
           '--no-import-alias',
           '--skip-install',
+          '--no-react-compiler',
           ...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
         ],
         nextTgzFilename,

test/integration/create-next-app/package-manager/bun.test.ts

@@ -49,6 +49,7 @@ describe('create-next-app with package manager bun', () => {
           '--no-src-dir',
           '--no-tailwind',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         nextTgzFilename,
         {
@@ -78,6 +79,7 @@ describe('create-next-app with package manager bun', () => {
           '--no-src-dir',
           '--no-tailwind',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         nextTgzFilename,
         {

test/integration/create-next-app/package-manager/npm.test.ts

@@ -38,6 +38,7 @@ describe('create-next-app with package manager npm', () => {
           '--no-src-dir',
           '--no-tailwind',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         nextTgzFilename,
         {
@@ -67,6 +68,7 @@ describe('create-next-app with package manager npm', () => {
           '--no-src-dir',
           '--no-tailwind',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         nextTgzFilename,
         {

test/integration/create-next-app/package-manager/pnpm.test.ts

@@ -38,6 +38,7 @@ describe('create-next-app with package manager pnpm', () => {
           '--no-src-dir',
           '--no-tailwind',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         nextTgzFilename,
         {
@@ -67,6 +68,7 @@ describe('create-next-app with package manager pnpm', () => {
           '--no-src-dir',
           '--no-tailwind',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         nextTgzFilename,
         {