[Bug]: Initial Next.JS template failed

[soranoo]

Describe the bug

Failed to initial Next.JS template.

╔ 🔎 Empty directory detected ═════════════════════════════════════════════════════════════════════╗
║                                                                                                  ║
║   Would you like to generate a new project from the following list?                              ║
║                                                                                                  ║
║   Note:                                                                                          ║
║   Storybook supports many more frameworks and bundlers than listed below. If you don't see       ║
║   your                                                                                           ║
║   preferred setup, you can still generate a project then rerun this command to add Storybook.    ║
║                                                                                                  ║
║   Press ^C at any time to quit.                                                                  ║
║                                                                                                  ║
╚══════════════════════════════════════════════════════════════════════════════════════════════════╝

√ Choose a project template » Next.js (TS)

Creating a new "Next.js (TS)" project with pnpm...

SB_CLI_INIT_0003 (GenerateNewProjectOnInitError): There was an error while using pnpm to create a new nextjs-ts project.

Command failed with exit code 1: pnpm create next-app^14 . --typescript --use-pnpm --eslint --tailwind --no-app --import-alias="@/*" --src-dir
C:\Users\{masked}\AppData\Local\pnpm-cache\dlx\rkqwh2evvza7eolfvjaqkj7snq\194740212af-d100:
 ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/create-next-app14: Not Found - 404

This error happened while installing a direct dependency of C:\Users\{masked}\AppData\Local\pnpm-cache\dlx\rkqwh2evvza7eolfvjaqkj7snq\194740212af-d100

create-next-app14 is not in the npm registry, or you have no permission to fetch it.

An authorization header was used: Bearer npm_[hidden]

More info:

    at scaffoldNewProject (C:\Users\{masked}\AppData\Local\npm-cache\_npx\f0725cbdc52d7264\node_modules\create-storybook\dist\bin\index.cjs:84:1241)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async doInitiate (C:\Users\{masked}\AppData\Local\npm-cache\_npx\f0725cbdc52d7264\node_modules\create-storybook\dist\bin\index.cjs:96:237)
    at async withTelemetry (C:\Users\{masked}\AppData\Local\npm-cache\_npx\f0725cbdc52d7264\node_modules\@storybook\core\dist\core-server\index.cjs:35750:12)
    at async initiate (C:\Users\{masked}\AppData\Local\npm-cache\_npx\f0725cbdc52d7264\node_modules\create-storybook\dist\bin\index.cjs:127:214) {
  data: {
    error: Error: Command failed with exit code 1: pnpm create next-app^14 . --typescript --use-pnpm --eslint --tailwind --no-app --import-alias="@/*" --src-dir
    C:\Users\{masked}\AppData\Local\pnpm-cache\dlx\rkqwh2evvza7eolfvjaqkj7snq\194740212af-d100:        
     ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/create-next-app14: Not Found - 404

    This error happened while installing a direct dependency of C:\Users\{masked}\AppData\Local\pnpm-cache\dlx\rkqwh2evvza7eolfvjaqkj7snq\194740212af-d100

    create-next-app14 is not in the npm registry, or you have no permission to fetch it.

    An authorization header was used: Bearer npm_[hidden]
        at makeError (C:\Users\{masked}\AppData\Local\npm-cache\_npx\f0725cbdc52d7264\node_modules\execa\lib\error.js:60:11)
        at handlePromise (C:\Users\{masked}\AppData\Local\npm-cache\_npx\f0725cbdc52d7264\node_modules\execa\index.js:118:26)
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
        at async scaffoldNewProject (C:\Users\{masked}\AppData\Local\npm-cache\_npx\f0725cbdc52d7264\node_modules\create-storybook\dist\bin\index.cjs:84:1128)
        at async doInitiate (C:\Users\{masked}\AppData\Local\npm-cache\_npx\f0725cbdc52d7264\node_modules\create-storybook\dist\bin\index.cjs:96:237)
        at async withTelemetry (C:\Users\{masked}\AppData\Local\npm-cache\_npx\f0725cbdc52d7264\node_modules\@storybook\core\dist\core-server\index.cjs:35750:12)
        at async initiate (C:\Users\{masked}\AppData\Local\npm-cache\_npx\f0725cbdc52d7264\node_modules\create-storybook\dist\bin\index.cjs:127:214) {
      shortMessage: 'Command failed with exit code 1: pnpm create next-app^14 . --typescript --use-pnpm --eslint --tailwind --no-app --import-alias="@/*" --src-dir',
      command: 'pnpm create next-app^14 . --typescript --use-pnpm --eslint --tailwind --no-app --import-alias="@/*" --src-dir',
      escapedCommand: 'pnpm create "next-app^14" . --typescript --use-pnpm --eslint --tailwind --no-app "--import-alias=\\"@/*\\"" --src-dir',
      exitCode: 1,
      signal: undefined,
      signalDescription: undefined,
      stdout: 'C:\\Users\\hokin\\AppData\\Local\\pnpm-cache\\dlx\\rkqwh2evvza7eolfvjaqkj7snq\\194740212af-d100:\r\n' +
        ' ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/create-next-app14: Not Found - 404\n' +
        '\n' +
        'This error happened while installing a direct dependency of C:\\Users\\hokin\\AppData\\Local\\pnpm-cache\\dlx\\rkqwh2evvza7eolfvjaqkj7snq\\194740212af-d100\n' +
        '\n' +
        'create-next-app14 is not in the npm registry, or you have no permission to fetch it.\n' +  
        '\n' +
        'An authorization header was used: Bearer npm_[hidden]',
      stderr: '',
      failed: true,
      timedOut: false,
      isCanceled: false,
      killed: false
    },
    packageManager: 'pnpm',
    projectType: 'nextjs-ts'
  },
  fromStorybook: true,
  category: 'CLI_INIT',
  documentation: '',
  code: 3
}

Reproduction link

n/a

Reproduction steps

1. pnpm dlx storybook init
2. select Next.js (TS) as tamplate
3. Error

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i5-13500HX
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.5 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.14.2 - ~\AppData\Roaming\npm\pnpm.CMD <----- active
  Browsers:
    Edge: Chromium (127.0.2651.74)

Additional context

I tried to run the failed command pnpm create next-app^14 . --typescript --use-pnpm --eslint --tailwind --no-app --import-alias="@/*" --src-dir independently. Yes, it failed. However when I remove the ^14 it WORKS.

Related code,

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

Lines 49 to 52 in 6c2a260

	npm: 'npm create next-app@^14 . -- --typescript --use-npm --eslint --tailwind --no-app --import-alias="@/*" --src-dir',
	// yarn doesn't support version ranges, so we have to use npx
	yarn: 'npx create-next-app@^14 . --typescript --use-yarn --eslint --tailwind --no-app --import-alias="@/*" --src-dir',
	pnpm: 'pnpm create next-app^14 . --typescript --use-pnpm --eslint --tailwind --no-app --import-alias="@/*" --src-dir',

[shilman]

We also should fix #30302 at the same time