From 158e30d7f29873f3bfe383fb42591dbca9d0ef80 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 12 Nov 2024 17:07:58 +0100
Subject: [PATCH 1/6] wip

---
 .../experimental-nextjs-vite/package.json     |   4 +-
 .../compatibility/compatibility-map.ts        |  46 +++++
 .../compatibility/draft-mode.compat.ts        |   2 +
 .../redirect-status-code.compat.ts            |   6 +
 .../compatibility/segment.compat.ts           |   8 +
 .../src/export-mocks/headers/index.ts         |   7 +-
 .../template/stories/Head.stories.tsx         |   6 +-
 .../template/stories/ImageLegacy.stories.tsx  |  12 +-
 .../template/stories/Link.stories.tsx         |   6 +-
 .../template/stories/Navigation.stories.tsx   |   2 +-
 .../template/stories/NextHeader.stories.tsx   |   6 +-
 .../template/stories/NextHeader.tsx           |  22 ++-
 .../template/stories/RSC.jsx                  |   7 -
 .../{RSC.stories.jsx => RSC.stories.tsx}      |  17 +-
 .../template/stories/RSC.tsx                  |   7 +
 .../stories/ServerActions.stories.tsx         |  10 +-
 .../template/stories/ServerActions.tsx        |   6 +-
 ...dJsx.stories.jsx => StyledJsx.stories.tsx} |   6 +-
 .../nextjs/src/export-mocks/headers/index.ts  |   1 -
 .../cli-storybook/src/sandbox-templates.ts    |  26 ++-
 code/yarn.lock                                | 162 +-----------------
 21 files changed, 159 insertions(+), 210 deletions(-)
 create mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts
 create mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts
 create mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts
 create mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts
 delete mode 100644 code/frameworks/experimental-nextjs-vite/template/stories/RSC.jsx
 rename code/frameworks/experimental-nextjs-vite/template/stories/{RSC.stories.jsx => RSC.stories.tsx} (60%)
 create mode 100644 code/frameworks/experimental-nextjs-vite/template/stories/RSC.tsx
 rename code/frameworks/experimental-nextjs-vite/template/stories/{StyledJsx.stories.jsx => StyledJsx.stories.tsx} (66%)

diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json
index b7ee9fe02f5b..d7437ff0fb90 100644
--- a/code/frameworks/experimental-nextjs-vite/package.json
+++ b/code/frameworks/experimental-nextjs-vite/package.json
@@ -103,12 +103,12 @@
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
-    "next": "^14.2.5",
+    "next": "^15.0.3",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
     "@storybook/test": "workspace:*",
-    "next": "^14.1.0",
+    "next": "^14.1.0 || ^15.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "storybook": "workspace:^",
diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts
new file mode 100644
index 000000000000..4cfb5e92f0b3
--- /dev/null
+++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts
@@ -0,0 +1,46 @@
+import semver from 'semver';
+import type { Configuration as WebpackConfig } from 'webpack';
+
+import { addScopedAlias, getNextjsVersion, setAlias } from '../utils';
+
+const mapping: Record<string, Record<string, string | boolean>> = {
+  '<14.1.0': {
+    // https://github.com/vercel/next.js/blob/v14.1.0/packages/next/src/shared/lib/segment.ts
+    'next/dist/shared/lib/segment': '@storybook/nextjs/dist/compatibility/segment.compat',
+  },
+  '<14.0.4': {
+    // https://github.com/vercel/next.js/blob/v14.0.4/packages/next/src/client/components/redirect-status-code.ts
+    'next/dist/client/components/redirect-status-code':
+      '@storybook/nextjs/dist/compatibility/redirect-status-code.compat',
+  },
+  '<15.0.0': {
+    'next/dist/server/request/headers': 'next/dist/client/components/headers',
+    // this path only exists from Next 15 onwards
+    'next/dist/server/request/draft-mode': '@storybook/nextjs/dist/compatibility/draft-mode.compat',
+  },
+};
+
+export const getCompatibilityAliases = () => {
+  const version = getNextjsVersion();
+  const result: Record<string, string> = {};
+
+  Object.keys(mapping).forEach((key) => {
+    if (semver.intersects(version, key)) {
+      Object.assign(result, mapping[key]);
+    }
+  });
+
+  return result;
+};
+
+export const configureCompatibilityAliases = (baseConfig: WebpackConfig): void => {
+  const aliases = getCompatibilityAliases();
+
+  Object.entries(aliases).forEach(([name, alias]) => {
+    if (typeof alias === 'string') {
+      addScopedAlias(baseConfig, name, alias);
+    } else {
+      setAlias(baseConfig, name, alias);
+    }
+  });
+};
diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts
new file mode 100644
index 000000000000..0304cb48455a
--- /dev/null
+++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts
@@ -0,0 +1,2 @@
+// Compatibility for Next 14
+export { draftMode } from 'next/dist/client/components/headers';
diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts
new file mode 100644
index 000000000000..cf2adb9e284c
--- /dev/null
+++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts
@@ -0,0 +1,6 @@
+// Compatibility for Next 13
+export enum RedirectStatusCode {
+  SeeOther = 303,
+  TemporaryRedirect = 307,
+  PermanentRedirect = 308,
+}
diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts
new file mode 100644
index 000000000000..98c195030f5c
--- /dev/null
+++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts
@@ -0,0 +1,8 @@
+// Compatibility for Next 13
+// from https://github.com/vercel/next.js/blob/606f9ff7903b58da51aa043bfe71cd7b6ea306fd/packages/next/src/shared/lib/segment.ts#L4
+export function isGroupSegment(segment: string) {
+  return segment[0] === '(' && segment.endsWith(')');
+}
+
+export const PAGE_SEGMENT_KEY = '__PAGE__';
+export const DEFAULT_SEGMENT_KEY = '__DEFAULT__';
diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts
index 1797d4ccaf57..1c903963ba2d 100644
--- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts
+++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts
@@ -1,14 +1,15 @@
 import { fn } from '@storybook/test';
 
-import * as originalHeaders from 'next/dist/client/components/headers';
+import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode';
+import * as headers from 'next/dist/server/request/headers';
 
 // re-exports of the actual module
-export * from 'next/dist/client/components/headers';
+export * from 'next/dist/server/request/headers';
 
 // mock utilities/overrides (as of Next v14.2.0)
 export { headers } from './headers';
 export { cookies } from './cookies';
 
 // passthrough mocks - keep original implementation but allow for spying
-const draftMode = fn(originalHeaders.draftMode).mockName('draftMode');
+const draftMode = fn(originalDraftMode ?? (headers as any).draftMode).mockName('draftMode');
 export { draftMode };
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx
index db1b747bf78d..0d344078868f 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx
@@ -33,8 +33,8 @@ export const Default: Story = {
   play: async () => {
     await waitFor(() => expect(document.title).toEqual('Next.js Head Title'));
     await expect(document.querySelectorAll('meta[property="og:title"]')).toHaveLength(1);
-    await expect((document.querySelector('meta[property="og:title"]') as any).content).toEqual(
-      'My new title'
-    );
+    await expect(
+      (document.querySelector('meta[property="og:title"]') as HTMLMetaElement)?.content
+    ).toEqual('My new title');
   },
 };
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx
index 61e61b916cbe..5e8852c2fb38 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 import Image from 'next/legacy/image';
 
 import Accessibility from '../../assets/accessibility.svg';
@@ -10,17 +12,19 @@ export default {
     src: Accessibility,
     alt: 'Accessibility',
   },
-};
+} as Meta<typeof Image>;
+
+type Story = StoryObj<typeof Image>;
 
-export const Default = {};
+export const Default: Story = {};
 
-export const BlurredPlaceholder = {
+export const BlurredPlaceholder: Story = {
   args: {
     placeholder: 'blur',
   },
 };
 
-export const BlurredAbsolutePlaceholder = {
+export const BlurredAbsolutePlaceholder: Story = {
   args: {
     src: 'https://storybook.js.org/images/placeholders/50x50.png',
     width: 50,
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx
index 7c1aa2073ab6..d071539c57a5 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx
@@ -76,9 +76,11 @@ export default {
   component: Component,
 } as Meta<typeof Component>;
 
-export const Default: StoryObj<typeof Component> = {};
+type Story = StoryObj<typeof Component>;
 
-export const InAppDir: StoryObj<typeof Component> = {
+export const Default: Story = {};
+
+export const InAppDir: Story = {
   parameters: {
     nextjs: {
       appDirectory: true,
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx
index d50ed5174d25..4b9b49904de0 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx
@@ -109,7 +109,7 @@ export default {
   },
 } as Meta<typeof Component>;
 
-export const Default: StoryObj<typeof Component> = {
+export const Default: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const routerMock = getRouter();
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx
index 178aea8c3ac8..1d31006f63e7 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx
@@ -8,7 +8,11 @@ import NextHeader from './NextHeader';
 
 export default {
   component: NextHeader,
-  parameters: { react: { rsc: true } },
+  parameters: {
+    react: {
+      rsc: true,
+    },
+  },
 } as Meta<typeof NextHeader>;
 
 type Story = StoryObj<typeof NextHeader>;
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx
index 6189f84baa62..eca7197ed79a 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx
@@ -5,25 +5,23 @@ import { cookies, headers } from 'next/headers';
 export default async function Component() {
   async function handleClick() {
     'use server';
-    cookies().set('user-id', 'encrypted-id');
+    (await cookies()).set('user-id', 'encrypted-id');
   }
 
   return (
     <>
       <h3>Cookies:</h3>
-      {cookies()
-        .getAll()
-        .map(({ name, value }) => {
-          return (
-            <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>
-              <strong>Name:</strong> <span>{name}</span>
-              <strong>Value:</strong> <span>{value}</span>
-            </p>
-          );
-        })}
+      {(await cookies()).getAll().map(({ name, value }) => {
+        return (
+          <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>
+            <strong>Name:</strong> <span>{name}</span>
+            <strong>Value:</strong> <span>{value}</span>
+          </p>
+        );
+      })}
 
       <h3>Headers:</h3>
-      {Array.from(headers().entries()).map(([name, value]: [string, string]) => {
+      {Array.from((await headers()).entries()).map(([name, value]: [string, string]) => {
         return (
           <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>
             <strong>Name:</strong> <span>{name}</span>
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.jsx b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.jsx
deleted file mode 100644
index a5771a6a9202..000000000000
--- a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-import 'server-only';
-
-export const RSC = async ({ label }) => <>RSC {label}</>;
-
-export const Nested = async ({ children }) => <>Nested {children}</>;
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.jsx b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx
similarity index 60%
rename from code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.jsx
rename to code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx
index f5520448bd61..f0db3625b4f8 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.jsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx
@@ -1,5 +1,8 @@
+/* eslint-disable local-rules/no-uncategorized-errors */
 import React from 'react';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { Nested, RSC } from './RSC';
 
 export default {
@@ -10,11 +13,13 @@ export default {
       rsc: true,
     },
   },
-};
+} as Meta<typeof RSC>;
 
-export const Default = {};
+type Story = StoryObj<typeof RSC>;
 
-export const DisableRSC = {
+export const Default: Story = {};
+
+export const DisableRSC: Story = {
   tags: ['!test'],
   parameters: {
     chromatic: { disable: true },
@@ -22,8 +27,8 @@ export const DisableRSC = {
   },
 };
 
-export const Error = {
-  tags: ['!test', '!vitest'],
+export const Errored: Story = {
+  tags: ['!test'],
   parameters: {
     chromatic: { disable: true },
   },
@@ -32,7 +37,7 @@ export const Error = {
   },
 };
 
-export const NestedRSC = {
+export const NestedRSC: Story = {
   render: (args) => (
     <Nested>
       <RSC {...args} />
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.tsx
new file mode 100644
index 000000000000..24655728ff46
--- /dev/null
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+import 'server-only';
+
+export const RSC = async ({ label }: { label: string }) => <>RSC {label}</>;
+
+export const Nested = async ({ children }: any) => <>Nested {children}</>;
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx
index 944bc42d8667..0844293c34f3 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx
@@ -59,7 +59,9 @@ export default {
   },
 } as Meta<typeof Component>;
 
-export const ProtectedWhileLoggedOut: StoryObj<typeof Component> = {
+type Story = StoryObj<typeof Component>;
+
+export const ProtectedWhileLoggedOut: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByText('Access protected route'));
@@ -71,7 +73,7 @@ export const ProtectedWhileLoggedOut: StoryObj<typeof Component> = {
   },
 };
 
-export const ProtectedWhileLoggedIn: StoryObj<typeof Component> = {
+export const ProtectedWhileLoggedIn: Story = {
   beforeEach() {
     cookies().set('user', 'storybookjs');
   },
@@ -87,7 +89,7 @@ export const ProtectedWhileLoggedIn: StoryObj<typeof Component> = {
   },
 };
 
-export const Logout: StoryObj<typeof Component> = {
+export const Logout: Story = {
   beforeEach() {
     cookies().set('user', 'storybookjs');
   },
@@ -103,7 +105,7 @@ export const Logout: StoryObj<typeof Component> = {
   },
 };
 
-export const Login: StoryObj<typeof Component> = {
+export const Login: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByText('Login'));
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx
index 5e1b3c7227dc..6244f78d2472 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx
@@ -5,7 +5,7 @@ import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
 
 export async function accessRoute() {
-  const user = cookies().get('user');
+  const user = (await cookies()).get('user');
 
   if (!user) {
     redirect('/');
@@ -16,13 +16,13 @@ export async function accessRoute() {
 }
 
 export async function logout() {
-  cookies().delete('user');
+  (await cookies()).delete('user');
   revalidatePath('/');
   redirect('/');
 }
 
 export async function login() {
-  cookies().set('user', 'storybookjs');
+  (await cookies()).set('user', 'storybookjs');
   revalidatePath('/');
   redirect('/');
 }
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.jsx b/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.tsx
similarity index 66%
rename from code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.jsx
rename to code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.tsx
index 5a0c586e232c..31adea42456c 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.jsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 const Component = () => (
   <div>
     <style jsx>{`
@@ -15,6 +17,6 @@ const Component = () => (
 
 export default {
   component: Component,
-};
+} as Meta<typeof Component>;
 
-export const Default = {};
+export const Default: StoryObj<typeof Component> = {};
diff --git a/code/frameworks/nextjs/src/export-mocks/headers/index.ts b/code/frameworks/nextjs/src/export-mocks/headers/index.ts
index 099107fa88c0..1c903963ba2d 100644
--- a/code/frameworks/nextjs/src/export-mocks/headers/index.ts
+++ b/code/frameworks/nextjs/src/export-mocks/headers/index.ts
@@ -1,6 +1,5 @@
 import { fn } from '@storybook/test';
 
-// This export won't exist in Next.js 14 but it's safe because we ignore it in Webpack when applicable
 import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode';
 import * as headers from 'next/dist/server/request/headers';
 
diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts
index b38c583ef8d6..a43c3d83745e 100644
--- a/code/lib/cli-storybook/src/sandbox-templates.ts
+++ b/code/lib/cli-storybook/src/sandbox-templates.ts
@@ -208,7 +208,7 @@ const baseTemplates = {
     },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
-  'experimental-nextjs-vite/default-ts': {
+  'experimental-nextjs-vite/14-ts': {
     name: 'Next.js Latest (Vite | TypeScript)',
     script:
       'npx create-next-app@^14 {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir',
@@ -229,6 +229,30 @@ const baseTemplates = {
         'prop-types',
       ],
     },
+    inDevelopment: true,
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
+  'experimental-nextjs-vite/default-ts': {
+    name: 'Next.js Latest (Vite | TypeScript)',
+    script:
+      'npx create-next-app {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir',
+    expected: {
+      framework: '@storybook/experimental-nextjs-vite',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-vite',
+    },
+    modifications: {
+      mainConfig: {
+        framework: '@storybook/experimental-nextjs-vite',
+        features: { experimentalRSC: true },
+      },
+      extraDependencies: [
+        'server-only',
+        '@storybook/experimental-nextjs-vite',
+        'vite',
+        'prop-types',
+      ],
+    },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'react-vite/default-js': {
diff --git a/code/yarn.lock b/code/yarn.lock
index ab06414c85cc..38f40e9ba451 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -4092,13 +4092,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:14.2.17":
-  version: 14.2.17
-  resolution: "@next/env@npm:14.2.17"
-  checksum: 10c0/181998dfe06275a7f43c56847bfbc4c521a10bd0e4a223b5b0fa1f73c24b0a993daa7ee736b82cbc3a6b64b13d965f7452dd4fc47f0a99909a1aa150862f5b1e
-  languageName: node
-  linkType: hard
-
 "@next/env@npm:15.0.3":
   version: 15.0.3
   resolution: "@next/env@npm:15.0.3"
@@ -4113,13 +4106,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:14.2.17":
-  version: 14.2.17
-  resolution: "@next/swc-darwin-arm64@npm:14.2.17"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@next/swc-darwin-arm64@npm:15.0.3":
   version: 15.0.3
   resolution: "@next/swc-darwin-arm64@npm:15.0.3"
@@ -4127,13 +4113,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:14.2.17":
-  version: 14.2.17
-  resolution: "@next/swc-darwin-x64@npm:14.2.17"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@next/swc-darwin-x64@npm:15.0.3":
   version: 15.0.3
   resolution: "@next/swc-darwin-x64@npm:15.0.3"
@@ -4141,13 +4120,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:14.2.17":
-  version: 14.2.17
-  resolution: "@next/swc-linux-arm64-gnu@npm:14.2.17"
-  conditions: os=linux & cpu=arm64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@next/swc-linux-arm64-gnu@npm:15.0.3":
   version: 15.0.3
   resolution: "@next/swc-linux-arm64-gnu@npm:15.0.3"
@@ -4155,13 +4127,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:14.2.17":
-  version: 14.2.17
-  resolution: "@next/swc-linux-arm64-musl@npm:14.2.17"
-  conditions: os=linux & cpu=arm64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@next/swc-linux-arm64-musl@npm:15.0.3":
   version: 15.0.3
   resolution: "@next/swc-linux-arm64-musl@npm:15.0.3"
@@ -4169,13 +4134,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:14.2.17":
-  version: 14.2.17
-  resolution: "@next/swc-linux-x64-gnu@npm:14.2.17"
-  conditions: os=linux & cpu=x64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@next/swc-linux-x64-gnu@npm:15.0.3":
   version: 15.0.3
   resolution: "@next/swc-linux-x64-gnu@npm:15.0.3"
@@ -4183,13 +4141,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:14.2.17":
-  version: 14.2.17
-  resolution: "@next/swc-linux-x64-musl@npm:14.2.17"
-  conditions: os=linux & cpu=x64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@next/swc-linux-x64-musl@npm:15.0.3":
   version: 15.0.3
   resolution: "@next/swc-linux-x64-musl@npm:15.0.3"
@@ -4197,13 +4148,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:14.2.17":
-  version: 14.2.17
-  resolution: "@next/swc-win32-arm64-msvc@npm:14.2.17"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@next/swc-win32-arm64-msvc@npm:15.0.3":
   version: 15.0.3
   resolution: "@next/swc-win32-arm64-msvc@npm:15.0.3"
@@ -4211,20 +4155,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:14.2.17":
-  version: 14.2.17
-  resolution: "@next/swc-win32-ia32-msvc@npm:14.2.17"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
-"@next/swc-win32-x64-msvc@npm:14.2.17":
-  version: 14.2.17
-  resolution: "@next/swc-win32-x64-msvc@npm:14.2.17"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@next/swc-win32-x64-msvc@npm:15.0.3":
   version: 15.0.3
   resolution: "@next/swc-win32-x64-msvc@npm:15.0.3"
@@ -6548,14 +6478,14 @@ __metadata:
     "@storybook/react": "workspace:*"
     "@storybook/test": "workspace:*"
     "@types/node": "npm:^18.0.0"
-    next: "npm:^14.2.5"
+    next: "npm:^15.0.3"
     sharp: "npm:^0.33.3"
     styled-jsx: "npm:5.1.6"
     typescript: "npm:^5.3.2"
     vite-plugin-storybook-nextjs: "npm:^1.0.11"
   peerDependencies:
     "@storybook/test": "workspace:*"
-    next: ^14.1.0
+    next: ^14.1.0 || ^15.0.0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     storybook: "workspace:^"
@@ -7597,7 +7527,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/counter@npm:0.1.3, @swc/counter@npm:^0.1.3":
+"@swc/counter@npm:0.1.3":
   version: 0.1.3
   resolution: "@swc/counter@npm:0.1.3"
   checksum: 10c0/8424f60f6bf8694cfd2a9bca45845bce29f26105cda8cf19cdb9fd3e78dc6338699e4db77a89ae449260bafa1cc6bec307e81e7fb96dbf7dcfce0eea55151356
@@ -7613,16 +7543,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/helpers@npm:0.5.5":
-  version: 0.5.5
-  resolution: "@swc/helpers@npm:0.5.5"
-  dependencies:
-    "@swc/counter": "npm:^0.1.3"
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/21a9b9cfe7e00865f9c9f3eb4c1cc5b397143464f7abee76a2c5366e591e06b0155b5aac93fe8269ef8d548df253f6fd931e9ddfc0fd12efd405f90f45506e7d
-  languageName: node
-  linkType: hard
-
 "@swc/helpers@npm:~0.5.0":
   version: 0.5.6
   resolution: "@swc/helpers@npm:0.5.6"
@@ -16724,7 +16644,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
+"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2
@@ -21530,64 +21450,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:^14.2.5":
-  version: 14.2.17
-  resolution: "next@npm:14.2.17"
-  dependencies:
-    "@next/env": "npm:14.2.17"
-    "@next/swc-darwin-arm64": "npm:14.2.17"
-    "@next/swc-darwin-x64": "npm:14.2.17"
-    "@next/swc-linux-arm64-gnu": "npm:14.2.17"
-    "@next/swc-linux-arm64-musl": "npm:14.2.17"
-    "@next/swc-linux-x64-gnu": "npm:14.2.17"
-    "@next/swc-linux-x64-musl": "npm:14.2.17"
-    "@next/swc-win32-arm64-msvc": "npm:14.2.17"
-    "@next/swc-win32-ia32-msvc": "npm:14.2.17"
-    "@next/swc-win32-x64-msvc": "npm:14.2.17"
-    "@swc/helpers": "npm:0.5.5"
-    busboy: "npm:1.6.0"
-    caniuse-lite: "npm:^1.0.30001579"
-    graceful-fs: "npm:^4.2.11"
-    postcss: "npm:8.4.31"
-    styled-jsx: "npm:5.1.1"
-  peerDependencies:
-    "@opentelemetry/api": ^1.1.0
-    "@playwright/test": ^1.41.2
-    react: ^18.2.0
-    react-dom: ^18.2.0
-    sass: ^1.3.0
-  dependenciesMeta:
-    "@next/swc-darwin-arm64":
-      optional: true
-    "@next/swc-darwin-x64":
-      optional: true
-    "@next/swc-linux-arm64-gnu":
-      optional: true
-    "@next/swc-linux-arm64-musl":
-      optional: true
-    "@next/swc-linux-x64-gnu":
-      optional: true
-    "@next/swc-linux-x64-musl":
-      optional: true
-    "@next/swc-win32-arm64-msvc":
-      optional: true
-    "@next/swc-win32-ia32-msvc":
-      optional: true
-    "@next/swc-win32-x64-msvc":
-      optional: true
-  peerDependenciesMeta:
-    "@opentelemetry/api":
-      optional: true
-    "@playwright/test":
-      optional: true
-    sass:
-      optional: true
-  bin:
-    next: dist/bin/next
-  checksum: 10c0/ee350c1de7709da9a240752ebb8f56e0a01bbeae43177a43a463dd1d4ed071c414899afb3ff2d4228e38afa4029f0e0f0b56d9939b0f4a1bf383f77f32ec5ad9
-  languageName: node
-  linkType: hard
-
 "next@npm:^15.0.3":
   version: 15.0.3
   resolution: "next@npm:15.0.3"
@@ -27020,22 +26882,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-jsx@npm:5.1.1":
-  version: 5.1.1
-  resolution: "styled-jsx@npm:5.1.1"
-  dependencies:
-    client-only: "npm:0.0.1"
-  peerDependencies:
-    react: ">= 16.8.0 || 17.x.x || ^18.0.0-0"
-  peerDependenciesMeta:
-    "@babel/core":
-      optional: true
-    babel-plugin-macros:
-      optional: true
-  checksum: 10c0/42655cdadfa5388f8a48bb282d6b450df7d7b8cf066ac37038bd0499d3c9f084815ebd9ff9dfa12a218fd4441338851db79603498d7557207009c1cf4d609835
-  languageName: node
-  linkType: hard
-
 "styled-jsx@npm:5.1.6, styled-jsx@npm:^5.1.6":
   version: 5.1.6
   resolution: "styled-jsx@npm:5.1.6"

From 1b724597e8a1f65754abc08e1d429cc0974b89b6 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 18 Nov 2024 22:15:56 +0100
Subject: [PATCH 2/6] use updated vite plugin

---
 .../experimental-nextjs-vite/package.json     |  5 +-
 .../compatibility/compatibility-map.ts        | 46 -------------------
 .../compatibility/draft-mode.compat.ts        |  2 +-
 .../redirect-status-code.compat.ts            |  6 ---
 .../compatibility/segment.compat.ts           |  8 ----
 .../src/routing/app-router-provider.tsx       |  5 +-
 .../src/compatibility/draft-mode.compat.ts    |  2 +-
 code/yarn.lock                                | 27 ++++-------
 8 files changed, 19 insertions(+), 82 deletions(-)
 delete mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts
 delete mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts
 delete mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts

diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json
index d7437ff0fb90..b57c3f5bf75b 100644
--- a/code/frameworks/experimental-nextjs-vite/package.json
+++ b/code/frameworks/experimental-nextjs-vite/package.json
@@ -99,7 +99,7 @@
     "@storybook/react": "workspace:*",
     "@storybook/test": "workspace:*",
     "styled-jsx": "5.1.6",
-    "vite-plugin-storybook-nextjs": "^1.0.11"
+    "vite-plugin-storybook-nextjs": "1.1.0--canary.27.65f1124.0"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
@@ -141,7 +141,8 @@
       "./src/images/decorator.tsx"
     ],
     "externals": [
-      "sb-original/image-context"
+      "sb-original/image-context",
+      "sb-original/default-loader"
     ],
     "platform": "node"
   },
diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts
deleted file mode 100644
index 4cfb5e92f0b3..000000000000
--- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import semver from 'semver';
-import type { Configuration as WebpackConfig } from 'webpack';
-
-import { addScopedAlias, getNextjsVersion, setAlias } from '../utils';
-
-const mapping: Record<string, Record<string, string | boolean>> = {
-  '<14.1.0': {
-    // https://github.com/vercel/next.js/blob/v14.1.0/packages/next/src/shared/lib/segment.ts
-    'next/dist/shared/lib/segment': '@storybook/nextjs/dist/compatibility/segment.compat',
-  },
-  '<14.0.4': {
-    // https://github.com/vercel/next.js/blob/v14.0.4/packages/next/src/client/components/redirect-status-code.ts
-    'next/dist/client/components/redirect-status-code':
-      '@storybook/nextjs/dist/compatibility/redirect-status-code.compat',
-  },
-  '<15.0.0': {
-    'next/dist/server/request/headers': 'next/dist/client/components/headers',
-    // this path only exists from Next 15 onwards
-    'next/dist/server/request/draft-mode': '@storybook/nextjs/dist/compatibility/draft-mode.compat',
-  },
-};
-
-export const getCompatibilityAliases = () => {
-  const version = getNextjsVersion();
-  const result: Record<string, string> = {};
-
-  Object.keys(mapping).forEach((key) => {
-    if (semver.intersects(version, key)) {
-      Object.assign(result, mapping[key]);
-    }
-  });
-
-  return result;
-};
-
-export const configureCompatibilityAliases = (baseConfig: WebpackConfig): void => {
-  const aliases = getCompatibilityAliases();
-
-  Object.entries(aliases).forEach(([name, alias]) => {
-    if (typeof alias === 'string') {
-      addScopedAlias(baseConfig, name, alias);
-    } else {
-      setAlias(baseConfig, name, alias);
-    }
-  });
-};
diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts
index 0304cb48455a..cdcaf63bbf1a 100644
--- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts
+++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts
@@ -1,2 +1,2 @@
-// Compatibility for Next 14
+// @ts-expect-error Compatibility for Next 14
 export { draftMode } from 'next/dist/client/components/headers';
diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts
deleted file mode 100644
index cf2adb9e284c..000000000000
--- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// Compatibility for Next 13
-export enum RedirectStatusCode {
-  SeeOther = 303,
-  TemporaryRedirect = 307,
-  PermanentRedirect = 308,
-}
diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts
deleted file mode 100644
index 98c195030f5c..000000000000
--- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Compatibility for Next 13
-// from https://github.com/vercel/next.js/blob/606f9ff7903b58da51aa043bfe71cd7b6ea306fd/packages/next/src/shared/lib/segment.ts#L4
-export function isGroupSegment(segment: string) {
-  return segment[0] === '(' && segment.endsWith(')');
-}
-
-export const PAGE_SEGMENT_KEY = '__PAGE__';
-export const DEFAULT_SEGMENT_KEY = '__DEFAULT__';
diff --git a/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx b/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx
index 99269e569075..68e01381948c 100644
--- a/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx
+++ b/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx
@@ -18,11 +18,14 @@ import {
   PathnameContext,
   SearchParamsContext,
 } from 'next/dist/shared/lib/hooks-client-context.shared-runtime';
-import { type Params } from 'next/dist/shared/lib/router/utils/route-matcher';
 import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment';
 
 import type { RouteParams } from './types';
 
+// Using an inline type so we can support Next 14 and lower
+// from https://github.com/vercel/next.js/blob/v15.0.3/packages/next/src/server/request/params.ts#L25
+type Params = Record<string, string | Array<string> | undefined>;
+
 type AppRouterProviderProps = {
   routeParams: RouteParams;
 };
diff --git a/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts b/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts
index 0304cb48455a..cdcaf63bbf1a 100644
--- a/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts
+++ b/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts
@@ -1,2 +1,2 @@
-// Compatibility for Next 14
+// @ts-expect-error Compatibility for Next 14
 export { draftMode } from 'next/dist/client/components/headers';
diff --git a/code/yarn.lock b/code/yarn.lock
index 38f40e9ba451..09d9fefa2147 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -4092,20 +4092,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:15.0.3":
+"@next/env@npm:15.0.3, @next/env@npm:^15.0.3":
   version: 15.0.3
   resolution: "@next/env@npm:15.0.3"
   checksum: 10c0/63582fed80d6a28fff102c935095da71fd57ddf6b5f5d564e85ebdefdeb93298f7f7cf7d813c75b460c6627106717ea959b4c232939e7abb97d73d8b8467d4cd
   languageName: node
   linkType: hard
 
-"@next/env@npm:^14.2.5":
-  version: 14.2.5
-  resolution: "@next/env@npm:14.2.5"
-  checksum: 10c0/63d8b88ac450b3c37940a9e2119a63a1074aca89908574ade6157a8aa295275dcb3ac5f69e00883fc55d0f12963b73b74e87ba32a5768a489f9609c6be57b699
-  languageName: node
-  linkType: hard
-
 "@next/swc-darwin-arm64@npm:15.0.3":
   version: 15.0.3
   resolution: "@next/swc-darwin-arm64@npm:15.0.3"
@@ -6482,7 +6475,7 @@ __metadata:
     sharp: "npm:^0.33.3"
     styled-jsx: "npm:5.1.6"
     typescript: "npm:^5.3.2"
-    vite-plugin-storybook-nextjs: "npm:^1.0.11"
+    vite-plugin-storybook-nextjs: "npm:1.1.0--canary.27.65f1124.0"
   peerDependencies:
     "@storybook/test": "workspace:*"
     next: ^14.1.0 || ^15.0.0
@@ -28798,25 +28791,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-storybook-nextjs@npm:^1.0.11":
-  version: 1.0.11
-  resolution: "vite-plugin-storybook-nextjs@npm:1.0.11"
+"vite-plugin-storybook-nextjs@npm:1.1.0--canary.27.65f1124.0":
+  version: 1.1.0--canary.27.65f1124.0
+  resolution: "vite-plugin-storybook-nextjs@npm:1.1.0--canary.27.65f1124.0"
   dependencies:
-    "@next/env": "npm:^14.2.5"
+    "@next/env": "npm:^15.0.3"
     image-size: "npm:^1.1.1"
     magic-string: "npm:^0.30.11"
     module-alias: "npm:^2.2.3"
     sharp: "npm:^0.33.4"
     ts-dedent: "npm:^2.2.0"
   peerDependencies:
-    "@storybook/test": ^8.3.0-alpha.3
-    next: ^14.1.0
-    storybook: ^8.3.0-alpha.3
+    "@storybook/test": ^8.3.0
+    next: ^14.1.0 || ^15.0.0
+    storybook: ^8.3.0
     vite: ^5.0.0
   dependenciesMeta:
     sharp:
       optional: true
-  checksum: 10c0/9652b76c13a682b688d9a4f617b1a66263f25f395a99af8e258bedef4f3b3ce1c856ec1ff66cc0359d6aedc96adee9750fd6b0432514dd575ad7896cd1de70df
+  checksum: 10c0/be22526b7471522a7a12f3302cf802708899a977d105317c7339f86aa4e6c25cbe3df37f983bef2c5875fda987daa7388171b78d0184ac7e000fbd180e1629bc
   languageName: node
   linkType: hard
 

From dd9ed96ee6c43e7a15fa5d1543057ea8cc8e0f00 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 19 Nov 2024 09:06:04 +0100
Subject: [PATCH 3/6] skip certain stories in vitest integration

---
 .../experimental-nextjs-vite/template/stories/RSC.stories.tsx   | 2 +-
 code/frameworks/nextjs/template/stories/RSC.stories.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx
index f0db3625b4f8..655a5f1a93e4 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx
@@ -28,7 +28,7 @@ export const DisableRSC: Story = {
 };
 
 export const Errored: Story = {
-  tags: ['!test'],
+  tags: ['!test', '!vitest'],
   parameters: {
     chromatic: { disable: true },
   },
diff --git a/code/frameworks/nextjs/template/stories/RSC.stories.tsx b/code/frameworks/nextjs/template/stories/RSC.stories.tsx
index f0db3625b4f8..655a5f1a93e4 100644
--- a/code/frameworks/nextjs/template/stories/RSC.stories.tsx
+++ b/code/frameworks/nextjs/template/stories/RSC.stories.tsx
@@ -28,7 +28,7 @@ export const DisableRSC: Story = {
 };
 
 export const Errored: Story = {
-  tags: ['!test'],
+  tags: ['!test', '!vitest'],
   parameters: {
     chromatic: { disable: true },
   },

From e762e5dfc503fd87301cf2459324e155b1d02343 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 19 Nov 2024 16:27:24 +0100
Subject: [PATCH 4/6] update vitest plugin version

---
 code/frameworks/experimental-nextjs-vite/package.json |  2 +-
 code/yarn.lock                                        | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json
index b57c3f5bf75b..e2d1384e2377 100644
--- a/code/frameworks/experimental-nextjs-vite/package.json
+++ b/code/frameworks/experimental-nextjs-vite/package.json
@@ -99,7 +99,7 @@
     "@storybook/react": "workspace:*",
     "@storybook/test": "workspace:*",
     "styled-jsx": "5.1.6",
-    "vite-plugin-storybook-nextjs": "1.1.0--canary.27.65f1124.0"
+    "vite-plugin-storybook-nextjs": "^1.1.0"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
diff --git a/code/yarn.lock b/code/yarn.lock
index 09d9fefa2147..45663fd3d6a8 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6475,7 +6475,7 @@ __metadata:
     sharp: "npm:^0.33.3"
     styled-jsx: "npm:5.1.6"
     typescript: "npm:^5.3.2"
-    vite-plugin-storybook-nextjs: "npm:1.1.0--canary.27.65f1124.0"
+    vite-plugin-storybook-nextjs: "npm:^1.1.0"
   peerDependencies:
     "@storybook/test": "workspace:*"
     next: ^14.1.0 || ^15.0.0
@@ -28791,9 +28791,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-storybook-nextjs@npm:1.1.0--canary.27.65f1124.0":
-  version: 1.1.0--canary.27.65f1124.0
-  resolution: "vite-plugin-storybook-nextjs@npm:1.1.0--canary.27.65f1124.0"
+"vite-plugin-storybook-nextjs@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "vite-plugin-storybook-nextjs@npm:1.1.0"
   dependencies:
     "@next/env": "npm:^15.0.3"
     image-size: "npm:^1.1.1"
@@ -28809,7 +28809,7 @@ __metadata:
   dependenciesMeta:
     sharp:
       optional: true
-  checksum: 10c0/be22526b7471522a7a12f3302cf802708899a977d105317c7339f86aa4e6c25cbe3df37f983bef2c5875fda987daa7388171b78d0184ac7e000fbd180e1629bc
+  checksum: 10c0/02761e1074e62a46b30fc5e13b1c7a3bf6047a5736ac17de8e33376a6cff2b1118a48a95d195ddfd37b1e7a55f6eb3385677da9b4d713189c2b68b9f9843906d
   languageName: node
   linkType: hard
 

From 8173350f7bc5ecc64a73b5e1eeee891d3661fd89 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 19 Nov 2024 19:10:57 +0100
Subject: [PATCH 5/6] fix parallelism

---
 .circleci/config.yml                          | 38 ++++++++--------
 .../cli-storybook/src/sandbox-templates.ts    |  4 +-
 scripts/get-template.ts                       | 45 ++++++++++---------
 3 files changed, 47 insertions(+), 40 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 5e7b5f1f1e07..69a497aa0588 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -826,19 +826,19 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 14
+          parallelism: 15
           requires:
             - build
       - build-sandboxes:
-          parallelism: 14
+          parallelism: 15
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 11
+          parallelism: 12
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 9
+          parallelism: 10
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -846,11 +846,11 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 9
+          parallelism: 10
           requires:
             - build-sandboxes
       - vitest-integration:
-          parallelism: 5
+          parallelism: 6
           requires:
             - create-sandboxes
       - bench-sandboxes:
@@ -904,31 +904,31 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 20
+          parallelism: 21
           requires:
             - build
       - build-sandboxes:
-          parallelism: 20
+          parallelism: 21
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 17
+          parallelism: 18
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 15
+          parallelism: 16
           requires:
             - build-sandboxes
       - e2e-dev:
-          parallelism: 2
+          parallelism: 3
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 15
+          parallelism: 16
           requires:
             - build-sandboxes
       - vitest-integration:
-          parallelism: 5
+          parallelism: 6
           requires:
             - create-sandboxes
       - test-portable-stories:
@@ -980,22 +980,22 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 37
+          parallelism: 39
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 37
+          parallelism: 39
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 34
+          parallelism: 36
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 32
+          parallelism: 33
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -1003,11 +1003,11 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 32
+          parallelism: 34
           requires:
             - build-sandboxes
       - vitest-integration:
-          parallelism: 11
+          parallelism: 12
           requires:
             - create-sandboxes
       - test-portable-stories:
diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts
index a43c3d83745e..f22278b12e45 100644
--- a/code/lib/cli-storybook/src/sandbox-templates.ts
+++ b/code/lib/cli-storybook/src/sandbox-templates.ts
@@ -235,7 +235,7 @@ const baseTemplates = {
   'experimental-nextjs-vite/default-ts': {
     name: 'Next.js Latest (Vite | TypeScript)',
     script:
-      'npx create-next-app {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir',
+      'npx create-next-app {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir --typescript --no-turbopack',
     expected: {
       framework: '@storybook/experimental-nextjs-vite',
       renderer: '@storybook/react',
@@ -253,6 +253,8 @@ const baseTemplates = {
         'prop-types',
       ],
     },
+    // TODO: Remove this as soon as sandboxes are updated. This way we can test a Next 15 project.
+    inDevelopment: true,
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'react-vite/default-js': {
diff --git a/scripts/get-template.ts b/scripts/get-template.ts
index cb351eab0410..4eca8e160709 100644
--- a/scripts/get-template.ts
+++ b/scripts/get-template.ts
@@ -54,10 +54,7 @@ export async function getTemplate(
 
   potentialTemplateKeys = potentialTemplateKeys.filter((t) => {
     const currentTemplate = allTemplates[t] as Template;
-    return (
-      currentTemplate.inDevelopment !== true &&
-      !currentTemplate.skipTasks?.includes(scriptName as SkippableTask)
-    );
+    return !currentTemplate.skipTasks?.includes(scriptName as SkippableTask);
   });
 
   if (potentialTemplateKeys.length !== total) {
@@ -114,10 +111,7 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) {
       const templateKeysPerScript = potentialTemplateKeys.filter((t) => {
         const currentTemplate = allTemplates[t] as Template;
 
-        return (
-          currentTemplate.inDevelopment !== true &&
-          !currentTemplate.skipTasks?.includes(script as SkippableTask)
-        );
+        return !currentTemplate.skipTasks?.includes(script as SkippableTask);
       });
       const workflowJobsRaw: (string | { [key: string]: any })[] = data.workflows[cad].jobs;
       const workflowJobs = workflowJobsRaw
@@ -148,6 +142,29 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) {
     });
   });
 
+  const inDevelopmentTemplates = Object.entries(allTemplates)
+    .filter(([_, t]) => t.inDevelopment)
+    .map(([k]) => k);
+
+  if (inDevelopmentTemplates.length > 0) {
+    summary.push(
+      `\n\n👇 Some templates are flagged to be in development. Please review if they should still contain this flag:\n\n${inDevelopmentTemplates
+        .map((k) => {
+          const includedInCadence = cadences.find((c) =>
+            templatesByCadence[c]?.includes(k as TemplateKey)
+          );
+
+          return `- ${k} ${includedInCadence ? `(included in ${includedInCadence})` : '(not part of any cadence)'}`;
+        })
+        .sort((a, b) => (a.includes('included') && !b.includes('included') ? -1 : 1))
+        .join('\n')}`
+    );
+
+    summary.push(
+      '\n💡 If a template in this list is part of any cadence, please consider removing the `inDevelopment` flag if applicable. If the template is not in any cadence for a long time, please consider checking it to see if it still works, and see if it still makes sense to have it in the sandbox generation.'
+    );
+  }
+
   if (isIncorrect) {
     summary.unshift(
       'The parellism count is incorrect for some jobs in .circleci/config.yml, you have to update them:'
@@ -157,18 +174,6 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) {
     summary.unshift('✅  The parallelism count is correct for all jobs in .circleci/config.yml:');
     console.log(summary.concat('\n').join('\n'));
   }
-
-  const inDevelopmentTemplates = Object.entries(allTemplates)
-    .filter(([_, t]) => t.inDevelopment)
-    .map(([k]) => k);
-
-  if (inDevelopmentTemplates.length > 0) {
-    console.log(
-      `👇 Some templates were skipped as they are flagged to be in development. Please review if they should still contain this flag:\n${inDevelopmentTemplates
-        .map((k) => `- ${k}`)
-        .join('\n')}`
-    );
-  }
 }
 
 type RunOptions = { cadence?: Cadence; task?: TaskKey; check: boolean };

From 6a1bbc47aeda37b398d249a16580e8f8f964ace1 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 19 Nov 2024 19:48:10 +0100
Subject: [PATCH 6/6] Revert "fix parallelism"

This reverts commit 8173350f7bc5ecc64a73b5e1eeee891d3661fd89.
---
 .circleci/config.yml                          | 38 ++++++++--------
 .../cli-storybook/src/sandbox-templates.ts    |  4 +-
 scripts/get-template.ts                       | 45 +++++++++----------
 3 files changed, 40 insertions(+), 47 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 69a497aa0588..5e7b5f1f1e07 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -826,19 +826,19 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build
       - build-sandboxes:
-          parallelism: 15
+          parallelism: 14
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 12
+          parallelism: 11
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 10
+          parallelism: 9
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -846,11 +846,11 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 10
+          parallelism: 9
           requires:
             - build-sandboxes
       - vitest-integration:
-          parallelism: 6
+          parallelism: 5
           requires:
             - create-sandboxes
       - bench-sandboxes:
@@ -904,31 +904,31 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 21
+          parallelism: 20
           requires:
             - build
       - build-sandboxes:
-          parallelism: 21
+          parallelism: 20
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 18
+          parallelism: 17
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build-sandboxes
       - e2e-dev:
-          parallelism: 3
+          parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build-sandboxes
       - vitest-integration:
-          parallelism: 6
+          parallelism: 5
           requires:
             - create-sandboxes
       - test-portable-stories:
@@ -980,22 +980,22 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 39
+          parallelism: 37
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 39
+          parallelism: 37
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 36
+          parallelism: 34
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 33
+          parallelism: 32
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -1003,11 +1003,11 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 34
+          parallelism: 32
           requires:
             - build-sandboxes
       - vitest-integration:
-          parallelism: 12
+          parallelism: 11
           requires:
             - create-sandboxes
       - test-portable-stories:
diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts
index f22278b12e45..a43c3d83745e 100644
--- a/code/lib/cli-storybook/src/sandbox-templates.ts
+++ b/code/lib/cli-storybook/src/sandbox-templates.ts
@@ -235,7 +235,7 @@ const baseTemplates = {
   'experimental-nextjs-vite/default-ts': {
     name: 'Next.js Latest (Vite | TypeScript)',
     script:
-      'npx create-next-app {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir --typescript --no-turbopack',
+      'npx create-next-app {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir',
     expected: {
       framework: '@storybook/experimental-nextjs-vite',
       renderer: '@storybook/react',
@@ -253,8 +253,6 @@ const baseTemplates = {
         'prop-types',
       ],
     },
-    // TODO: Remove this as soon as sandboxes are updated. This way we can test a Next 15 project.
-    inDevelopment: true,
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'react-vite/default-js': {
diff --git a/scripts/get-template.ts b/scripts/get-template.ts
index 4eca8e160709..cb351eab0410 100644
--- a/scripts/get-template.ts
+++ b/scripts/get-template.ts
@@ -54,7 +54,10 @@ export async function getTemplate(
 
   potentialTemplateKeys = potentialTemplateKeys.filter((t) => {
     const currentTemplate = allTemplates[t] as Template;
-    return !currentTemplate.skipTasks?.includes(scriptName as SkippableTask);
+    return (
+      currentTemplate.inDevelopment !== true &&
+      !currentTemplate.skipTasks?.includes(scriptName as SkippableTask)
+    );
   });
 
   if (potentialTemplateKeys.length !== total) {
@@ -111,7 +114,10 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) {
       const templateKeysPerScript = potentialTemplateKeys.filter((t) => {
         const currentTemplate = allTemplates[t] as Template;
 
-        return !currentTemplate.skipTasks?.includes(script as SkippableTask);
+        return (
+          currentTemplate.inDevelopment !== true &&
+          !currentTemplate.skipTasks?.includes(script as SkippableTask)
+        );
       });
       const workflowJobsRaw: (string | { [key: string]: any })[] = data.workflows[cad].jobs;
       const workflowJobs = workflowJobsRaw
@@ -142,29 +148,6 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) {
     });
   });
 
-  const inDevelopmentTemplates = Object.entries(allTemplates)
-    .filter(([_, t]) => t.inDevelopment)
-    .map(([k]) => k);
-
-  if (inDevelopmentTemplates.length > 0) {
-    summary.push(
-      `\n\n👇 Some templates are flagged to be in development. Please review if they should still contain this flag:\n\n${inDevelopmentTemplates
-        .map((k) => {
-          const includedInCadence = cadences.find((c) =>
-            templatesByCadence[c]?.includes(k as TemplateKey)
-          );
-
-          return `- ${k} ${includedInCadence ? `(included in ${includedInCadence})` : '(not part of any cadence)'}`;
-        })
-        .sort((a, b) => (a.includes('included') && !b.includes('included') ? -1 : 1))
-        .join('\n')}`
-    );
-
-    summary.push(
-      '\n💡 If a template in this list is part of any cadence, please consider removing the `inDevelopment` flag if applicable. If the template is not in any cadence for a long time, please consider checking it to see if it still works, and see if it still makes sense to have it in the sandbox generation.'
-    );
-  }
-
   if (isIncorrect) {
     summary.unshift(
       'The parellism count is incorrect for some jobs in .circleci/config.yml, you have to update them:'
@@ -174,6 +157,18 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) {
     summary.unshift('✅  The parallelism count is correct for all jobs in .circleci/config.yml:');
     console.log(summary.concat('\n').join('\n'));
   }
+
+  const inDevelopmentTemplates = Object.entries(allTemplates)
+    .filter(([_, t]) => t.inDevelopment)
+    .map(([k]) => k);
+
+  if (inDevelopmentTemplates.length > 0) {
+    console.log(
+      `👇 Some templates were skipped as they are flagged to be in development. Please review if they should still contain this flag:\n${inDevelopmentTemplates
+        .map((k) => `- ${k}`)
+        .join('\n')}`
+    );
+  }
 }
 
 type RunOptions = { cadence?: Cadence; task?: TaskKey; check: boolean };