feat(next-upgrade): suggest React codemod

packages/next-codemod/bin/upgrade.ts

@@ -74,14 +74,31 @@ export async function runUpgrade(
     return
   }
 
+  // If the app is a pure Pages Router (no app dir) and the user wants to stay on React 18,
+  // we can skip the upgrading React and suggesting relevant codemods.
+  const { isPagesOnlyAndWantReact18 } = await prompts(
+    {
+      type: 'confirm',
+      name: 'isPagesOnlyAndWantReact18',
+      message:
+        'Are you using Pages Router only (no App Router) and want to upgrade up until React 18?',
+      initial: false,
+      active: 'Yes',
+      inactive: 'No',
+    },
+    { onCancel }
+  )
+
   // We're resolving a specific version here to avoid including "ugly" version queries
   // in the manifest.
   // E.g. in peerDependencies we could have `^18.2.0 || ^19.0.0 || 20.0.0-canary`
   // If we'd just `npm add` that, the manifest would read the same version query.
   // This is basically a `npm --save-exact react@$versionQuery` that works for every package manager.
-  const targetReactVersion = await loadHighestNPMVersionMatching(
-    `react@${targetNextPackageJson.peerDependencies['react']}`
-  )
+  const targetReactVersion = !isPagesOnlyAndWantReact18
+    ? await loadHighestNPMVersionMatching(
+        `react@${targetNextPackageJson.peerDependencies['react']}`
+      )
+    : '18.3.0'
 
   if (compareVersions(targetNextVersion, '15.0.0-canary') >= 0) {
     await suggestTurbopack(appPackageJson)
@@ -134,6 +151,12 @@ export async function runUpgrade(
     await runTransform(codemod, process.cwd(), { force: true })
   }
 
+  // The following React codemods are for React 19
+  if (!isPagesOnlyAndWantReact18) {
+    await suggestReactCodemods(packageManager)
+    await suggestReactTypesCodemods(packageManager)
+  }
+
   console.log() // new line
   if (codemods.length > 0) {
     console.log(`${pc.green('✔')} Codemods have been applied successfully.`)
@@ -263,3 +286,61 @@ async function suggestCodemods(
 
   return codemods
 }
+
+async function suggestReactCodemods(packageManager: PackageManager) {
+  const { runReactCodemod } = await prompts(
+    {
+      type: 'toggle',
+      name: 'runReactCodemod',
+      message: 'Do you want to run the React 19 upgrade codemod?',
+      initial: true,
+      active: 'Yes',
+      inactive: 'No',
+    },
+    { onCancel }
+  )
+
+  if (runReactCodemod) {
+    const commandMap = {
+      yarn: 'yarn dlx',
+      pnpm: 'pnpx',
+      bun: 'bunx',
+      npm: 'npx',
+    }
+    const command = commandMap[packageManager] || 'npx'
+
+    // https://react.dev/blog/2024/04/25/react-19-upgrade-guide#run-all-react-19-codemods
+    execSync(`${command} codemod@latest react/19/migration-recipe`, {
+      stdio: 'inherit',
+    })
+  }
+}
+
+async function suggestReactTypesCodemods(packageManager: PackageManager) {
+  const { runReactTypesCodemod } = await prompts(
+    {
+      type: 'toggle',
+      name: 'runReactTypesCodemod',
+      message: 'Do you want to run the React Types codemod?',
+      initial: true,
+      active: 'Yes',
+      inactive: 'No',
+    },
+    { onCancel }
+  )
+
+  if (runReactTypesCodemod) {
+    const commandMap = {
+      yarn: 'yarn dlx',
+      pnpm: 'pnpx',
+      bun: 'bunx',
+      npm: 'npx',
+    }
+    const command = commandMap[packageManager] || 'npx'
+
+    // https://react.dev/blog/2024/04/25/react-19-upgrade-guide#typescript-changes
+    execSync(`${command} types-react-codemod@latest preset-19 .`, {
+      stdio: 'inherit',
+    })
+  }
+}