CLI: Fix Nextjs project creation in empty directories

[yannbf]

Closes #32827

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Chores
  • Updated Next.js project scaffolding to disable React compiler during initialization across npm, yarn, and pnpm.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a --no-react-compiler flag to Next.js project creation commands for npm, yarn, and pnpm within the nextjs-ts scaffold to prevent React compiler usage during project initialization.

Changes

Cohort / File(s)	Summary
Next.js scaffold configuration code/lib/create-storybook/src/scaffold-new-project.ts	Appends --no-react-compiler flag to createScript commands for npm, yarn, and pnpm package managers in the nextjs-ts scaffold template.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch yann/fix-nextjs-hanging

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit ffd220e

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	46s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-24 15:21:05 UTC

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 124987d and ffd220e.

📒 Files selected for processing (1)

• code/lib/create-storybook/src/scaffold-new-project.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (use yarn lint:js:cmd <file>)

Files:

• code/lib/create-storybook/src/scaffold-new-project.ts

**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions from modules when they need to be unit-tested

Files:

• code/lib/create-storybook/src/scaffold-new-project.ts

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

In application code, use Storybook loggers instead of console.* (client code: storybook/internal/client-logger; server code: storybook/internal/node-logger)

Files:

• code/lib/create-storybook/src/scaffold-new-project.ts

{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/lib/create-storybook/src/scaffold-new-project.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Danger JS
• GitHub Check: normal
• GitHub Check: Core Unit Tests, windows-latest

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify the --no-react-compiler flag and provide context for the change.

The addition of --no-react-compiler to all Next.js project creation commands needs verification:

1. Flag validity: Confirm that --no-react-compiler is a supported flag in create-next-app. The React Compiler feature may have specific version requirements or may not be available in all Next.js versions.

2. Missing context: The PR description is empty, providing no explanation for why this change is necessary. The PR title mentions "Fix Nextjs project creation in empty directories" and the branch name suggests it addresses a "hanging" issue, but there's no description of:

   • What specific problem occurred with the React compiler during project creation
   • Why disabling the React compiler resolves the issue
   • Whether this was reproducible and how

3. Behavior change: This modifies the default behavior of Next.js scaffolding. Users will now have projects created without the React compiler by default. Consider documenting this change if it's intentional.

4. Testing: No tests were added or updated for this bug fix. Consider adding:

   • Integration tests to verify Next.js projects are created successfully with this flag
   • Tests to verify the flag is present in all package manager variants

Run the following script to check the latest create-next-app documentation and verify flag support:

Additionally, verify the flag is correctly formatted by checking if it's being passed to create-next-app:

---

🏁 Script executed:

#!/bin/bash
# Description: Verify Next.js project creation commands and check for similar flag patterns

# Check if there are any other occurrences or references to react-compiler in the codebase
rg -n "react-compiler" --type ts --type js -C 3

# Look for any related test files that should be updated
fd -e ts -e js "scaffold.*test" --exec echo "Test file: {}"

Length of output: 1178

---

🌐 Web query:

Does create-next-app support the --no-react-compiler flag?

💡 Result:

Short answer: No — create-next-app does not provide a dedicated --no-react-compiler flag. The create-next-app CLI supports generic --no-* negation for listed defaults (e.g., --no-eslint, --no-ts) but there’s no --no-react-compiler option in the CLI reference. To opt out of the React Compiler, pick a template without it or disable the feature in your app’s next.config.js. [1][2][3]

Sources:

• create-next-app CLI reference (shows available flags and --no-* pattern). [1]
• Next.js docs for the React Compiler (how to enable/configure it in next.config.js). [2]
• React team announcement noting create-next-app templates may include the compiler (how new apps can opt into templates). [3]

---

Remove the unsupported --no-react-compiler flag from all Next.js create commands (lines 49, 51, 52).

The --no-react-compiler flag is not a supported option in create-next-app. Create-next-app only supports generic --no-* negation for listed defaults (e.g., --no-eslint, --no-ts), and there is no --no-react-compiler option in the CLI reference. To opt out of the React Compiler, you should pick a template without it or disable the feature in your app's next.config.js.

The invalid flag will be passed to the CLI but ignored or cause an error, breaking the scaffolding process. Remove --no-react-compiler from:

• Line 49 (npm command)
• Line 51 (yarn command)
• Line 52 (pnpm command)

🤖 Prompt for AI Agents

In code/lib/create-storybook/src/scaffold-new-project.ts around lines 49 to 52,
the create-next-app commands include the unsupported --no-react-compiler flag
which can break or be ignored by the CLI; remove --no-react-compiler from the
npm, yarn, and pnpm command strings and keep the rest of flags intact (if opting
out of React Compiler is required, handle it via selecting a different template
or configuring next.config.js instead of passing this CLI flag).