[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

@@ -40,6 +40,7 @@ export async function createApp({
   turbopack,
   rspack,
   disableGit,
+  reactCompiler,
 }: {
   appPath: string
   packageManager: PackageManager
@@ -57,6 +58,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'
@@ -240,6 +242,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('--app', 'Initialize as an App Router project.')
   .option('--src-dir', "Initialize inside a 'src/' directory.")
@@ -237,6 +238,7 @@ async function run(): Promise<void> {
       empty: false,
       turbopack: true,
       disableGit: false,
+      reactCompiler: false,
     }
     const getPrefOrDefault = (field: string) =>
       preferences[field] ?? defaults[field]
@@ -296,6 +298,29 @@ async function run(): Promise<void> {
       }
     }
 
+    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',
+          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')
@@ -435,6 +460,7 @@ async function run(): Promise<void> {
       turbopack: opts.turbopack,
       rspack: opts.rspack,
       disableGit: opts.disableGit,
+      reactCompiler: opts.reactCompiler,
     })
   } catch (reason) {
     if (!(reason instanceof DownloadError)) {
@@ -468,6 +494,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

@@ -45,6 +45,7 @@ export const installTemplate = async ({
   skipInstall,
   turbopack,
   rspack,
+  reactCompiler,
 }: InstallTemplateArgs) => {
   console.log(bold(`Using ${packageManager}.`));
 
@@ -93,6 +94,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  experimental: {\n    reactCompiler: true,\n  },\n};`,
+      );
+    } else {
+      configContent = configContent.replace(
+        "const nextConfig = {};",
+        `const nextConfig = {\n  experimental: {\n    reactCompiler: true,\n  },\n};`,
+      );
+    }
+
+    await fs.writeFile(nextConfigFile, configContent);
+  }
+
   const tsconfigFile = path.join(
     root,
     mode === "js" ? "jsconfig.json" : "tsconfig.json",
@@ -219,6 +242,12 @@ export const installTemplate = async ({
     }
   }
 
+  if (reactCompiler) {
+    // Note: When the compiler is stable, the versioning scheme will change to be standalone rather
+    // than in lockstep with React.
+    packageJson.devDependencies["babel-plugin-react-compiler"] = "19.1.0-rc.2";
+  }
+
   /**
    * TypeScript projects will have type definitions and other devDependencies.
    */

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

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

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,
         {

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

@@ -46,6 +46,7 @@ describe('create-next-app with package manager yarn', () => {
           '--no-src-dir',
           '--no-tailwind',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         nextTgzFilename,
         {
@@ -75,6 +76,7 @@ describe('create-next-app with package manager yarn', () => {
           '--no-src-dir',
           '--no-tailwind',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         nextTgzFilename,
         {

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

@@ -29,6 +29,7 @@ describe('create-next-app prompts', () => {
           '--no-src-dir',
           '--no-tailwind',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         {
           cwd,
@@ -68,6 +69,7 @@ describe('create-next-app prompts', () => {
           '--no-tailwind',
           '--no-src-dir',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         {
           cwd,
@@ -104,6 +106,7 @@ describe('create-next-app prompts', () => {
           '--no-turbopack',
           '--no-src-dir',
           '--no-import-alias',
+          '--no-react-compiler',
         ],
         {
           cwd,
@@ -140,6 +143,7 @@ describe('create-next-app prompts', () => {
           '--no-turbopack',
           '--no-tailwind',
           '--no-src-dir',
+          '--no-react-compiler',
         ],
         {
           cwd,