diff --git a/code/frameworks/nextjs-vite/src/export-mocks/headers/cookies.ts b/code/frameworks/nextjs-vite/src/export-mocks/headers/cookies.ts
index 9264a7e191c2..547a6cd3dbaa 100644
--- a/code/frameworks/nextjs-vite/src/export-mocks/headers/cookies.ts
+++ b/code/frameworks/nextjs-vite/src/export-mocks/headers/cookies.ts
@@ -5,7 +5,7 @@
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
 import { headers } from '@storybook/nextjs-vite/headers.mock';
 
-import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies';
+import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies/index.js';
 import { fn } from 'storybook/test';
 
 class RequestCookiesMock extends RequestCookies {
diff --git a/code/frameworks/nextjs-vite/src/export-mocks/headers/headers.ts b/code/frameworks/nextjs-vite/src/export-mocks/headers/headers.ts
index 1d65c9285d93..ede58f535cdc 100644
--- a/code/frameworks/nextjs-vite/src/export-mocks/headers/headers.ts
+++ b/code/frameworks/nextjs-vite/src/export-mocks/headers/headers.ts
@@ -1,4 +1,4 @@
-import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers';
+import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers.js';
 import { fn } from 'storybook/test';
 
 class HeadersAdapterMock extends HeadersAdapter {
diff --git a/code/frameworks/nextjs-vite/src/export-mocks/headers/index.ts b/code/frameworks/nextjs-vite/src/export-mocks/headers/index.ts
index f1e27b49c646..0926efabcefb 100644
--- a/code/frameworks/nextjs-vite/src/export-mocks/headers/index.ts
+++ b/code/frameworks/nextjs-vite/src/export-mocks/headers/index.ts
@@ -1,9 +1,9 @@
-import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode';
-import * as headers from 'next/dist/server/request/headers';
+import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode.js';
+import * as headers from 'next/dist/server/request/headers.js';
 import { fn } from 'storybook/test';
 
 // re-exports of the actual module
-export * from 'next/dist/server/request/headers';
+export * from 'next/dist/server/request/headers.js';
 
 // mock utilities/overrides (as of Next v14.2.0)
 export { headers } from './headers';
diff --git a/code/frameworks/nextjs-vite/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs-vite/src/export-mocks/navigation/index.ts
index 6bb5f1780b62..567f9bcae282 100644
--- a/code/frameworks/nextjs-vite/src/export-mocks/navigation/index.ts
+++ b/code/frameworks/nextjs-vite/src/export-mocks/navigation/index.ts
@@ -1,8 +1,8 @@
 import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors';
 
-import * as actual from 'next/dist/client/components/navigation';
-import { getRedirectError } from 'next/dist/client/components/redirect';
-import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code';
+import * as actual from 'next/dist/client/components/navigation.js';
+import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code.js';
+import { getRedirectError } from 'next/dist/client/components/redirect.js';
 import type { Mock } from 'storybook/test';
 import { fn } from 'storybook/test';
 
@@ -57,7 +57,7 @@ export const getRouter = () => {
 };
 
 // re-exports of the actual module
-export * from 'next/dist/client/components/navigation';
+export * from 'next/dist/client/components/navigation.js';
 
 // mock utilities/overrides (as of Next v14.2.0)
 export const redirect = fn(
diff --git a/code/frameworks/nextjs-vite/src/export-mocks/router/index.ts b/code/frameworks/nextjs-vite/src/export-mocks/router/index.ts
index 26ee30342c70..3bb4cec038e3 100644
--- a/code/frameworks/nextjs-vite/src/export-mocks/router/index.ts
+++ b/code/frameworks/nextjs-vite/src/export-mocks/router/index.ts
@@ -1,6 +1,6 @@
 import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors';
 
-import singletonRouter, * as originalRouter from 'next/dist/client/router';
+import singletonRouter, * as originalRouter from 'next/dist/client/router.js';
 import type { NextRouter, SingletonRouter } from 'next/router';
 import type { Mock } from 'storybook/test';
 import { fn } from 'storybook/test';
@@ -108,7 +108,7 @@ export const getRouter = () => {
 };
 
 // re-exports of the actual module
-export * from 'next/dist/client/router';
+export * from 'next/dist/client/router.js';
 export default singletonRouter;
 
 // mock utilities/overrides (as of Next v14.2.0)
diff --git a/code/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsx b/code/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsx
index 69b58866c510..1fcfc3cbfa0c 100644
--- a/code/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsx
+++ b/code/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsx
@@ -1,8 +1,8 @@
 import type { PropsWithChildren } from 'react';
 import React, { useMemo } from 'react';
 
-import initHeadManager from 'next/dist/client/head-manager';
-import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context.shared-runtime';
+import initHeadManager from 'next/dist/client/head-manager.js';
+import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context.shared-runtime.js';
 
 type HeadManagerValue = {
   updateHead?: ((state: JSX.Element[]) => void) | undefined;
diff --git a/code/frameworks/nextjs-vite/src/preview.tsx b/code/frameworks/nextjs-vite/src/preview.tsx
index 6be65e13db4a..5dc537d85732 100644
--- a/code/frameworks/nextjs-vite/src/preview.tsx
+++ b/code/frameworks/nextjs-vite/src/preview.tsx
@@ -11,7 +11,7 @@ import { createNavigation } from '@storybook/nextjs-vite/navigation.mock';
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
 import { createRouter } from '@storybook/nextjs-vite/router.mock';
 
-import { isNextRouterError } from 'next/dist/client/components/is-next-router-error';
+import { isNextRouterError } from 'next/dist/client/components/is-next-router-error.js';
 
 import { HeadManagerDecorator } from './head-manager/decorator';
 import { ImageDecorator } from './images/decorator';
diff --git a/code/frameworks/nextjs-vite/src/routing/app-router-provider.tsx b/code/frameworks/nextjs-vite/src/routing/app-router-provider.tsx
index c01226bbd440..20c6cf214da4 100644
--- a/code/frameworks/nextjs-vite/src/routing/app-router-provider.tsx
+++ b/code/frameworks/nextjs-vite/src/routing/app-router-provider.tsx
@@ -12,13 +12,13 @@ import {
   AppRouterContext,
   GlobalLayoutRouterContext,
   LayoutRouterContext,
-} from 'next/dist/shared/lib/app-router-context.shared-runtime';
+} from 'next/dist/shared/lib/app-router-context.shared-runtime.js';
 import {
   PathParamsContext,
   PathnameContext,
   SearchParamsContext,
-} from 'next/dist/shared/lib/hooks-client-context.shared-runtime';
-import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment';
+} from 'next/dist/shared/lib/hooks-client-context.shared-runtime.js';
+import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment.js';
 
 import type { RouteParams } from './types';
 
diff --git a/code/frameworks/nextjs-vite/src/routing/decorator.tsx b/code/frameworks/nextjs-vite/src/routing/decorator.tsx
index f21819f373a4..575870b62831 100644
--- a/code/frameworks/nextjs-vite/src/routing/decorator.tsx
+++ b/code/frameworks/nextjs-vite/src/routing/decorator.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import type { Addon_StoryContext } from 'storybook/internal/types';
 
-import { RedirectBoundary } from 'next/dist/client/components/redirect-boundary';
+import { RedirectBoundary } from 'next/dist/client/components/redirect-boundary.js';
 
 import { AppRouterProvider } from './app-router-provider';
 import { PageRouterProvider } from './page-router-provider';
diff --git a/code/frameworks/nextjs-vite/src/routing/page-router-provider.tsx b/code/frameworks/nextjs-vite/src/routing/page-router-provider.tsx
index 972ea1c2c140..5633321f7fb9 100644
--- a/code/frameworks/nextjs-vite/src/routing/page-router-provider.tsx
+++ b/code/frameworks/nextjs-vite/src/routing/page-router-provider.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
 import { getRouter } from '@storybook/nextjs-vite/router.mock';
 
-import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime';
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime.js';
 
 export const PageRouterProvider: React.FC<PropsWithChildren> = ({ children }) => (
   <RouterContext.Provider value={getRouter()}>{children}</RouterContext.Provider>
diff --git a/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts b/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts
index cdcaf63bbf1a..ed438d0c472f 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 @@
 // @ts-expect-error Compatibility for Next 14
-export { draftMode } from 'next/dist/client/components/headers';
+export { draftMode } from 'next/dist/client/components/headers.js';
diff --git a/code/frameworks/nextjs/src/export-mocks/cache/index.ts b/code/frameworks/nextjs/src/export-mocks/cache/index.ts
index 16ecd0b42e4a..0962c0e19154 100644
--- a/code/frameworks/nextjs/src/export-mocks/cache/index.ts
+++ b/code/frameworks/nextjs/src/export-mocks/cache/index.ts
@@ -1,5 +1,5 @@
-import { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache';
-import { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store';
+import { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache.js';
+import { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store.js';
 import { fn } from 'storybook/test';
 
 // mock utilities/overrides (as of Next v14.2.0)
diff --git a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts
index b8125b5fef1c..0f74f7f05b6b 100644
--- a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts
+++ b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts
@@ -5,7 +5,7 @@
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
 import { headers } from '@storybook/nextjs/headers.mock';
 
-import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies';
+import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies/index.js';
 import { fn } from 'storybook/test';
 
 class RequestCookiesMock extends RequestCookies {
diff --git a/code/frameworks/nextjs/src/export-mocks/headers/headers.ts b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts
index 1d65c9285d93..ede58f535cdc 100644
--- a/code/frameworks/nextjs/src/export-mocks/headers/headers.ts
+++ b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts
@@ -1,4 +1,4 @@
-import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers';
+import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers.js';
 import { fn } from 'storybook/test';
 
 class HeadersAdapterMock extends HeadersAdapter {
diff --git a/code/frameworks/nextjs/src/export-mocks/headers/index.ts b/code/frameworks/nextjs/src/export-mocks/headers/index.ts
index 0ae9091dd927..d0f1e41b0afb 100644
--- a/code/frameworks/nextjs/src/export-mocks/headers/index.ts
+++ b/code/frameworks/nextjs/src/export-mocks/headers/index.ts
@@ -1,8 +1,8 @@
-import * as headers from 'next/dist/server/request/headers';
+import * as headers from 'next/dist/server/request/headers.js';
 import { fn } from 'storybook/test';
 
 // re-exports of the actual module
-export * from 'next/dist/server/request/headers';
+export * from 'next/dist/server/request/headers.js';
 
 // mock utilities/overrides (as of Next v14.2.0)
 export { headers } from './headers';
diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts
index e7acaee34415..d294afdd473a 100644
--- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts
+++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts
@@ -1,8 +1,8 @@
 import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors';
 
-import * as actual from 'next/dist/client/components/navigation';
-import { getRedirectError } from 'next/dist/client/components/redirect';
-import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code';
+import * as actual from 'next/dist/client/components/navigation.js';
+import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code.js';
+import { getRedirectError } from 'next/dist/client/components/redirect.js';
 import type { Mock } from 'storybook/test';
 import { fn } from 'storybook/test';
 
@@ -57,7 +57,7 @@ export const getRouter = () => {
 };
 
 // re-exports of the actual module
-export * from 'next/dist/client/components/navigation';
+export * from 'next/dist/client/components/navigation.js';
 
 // mock utilities/overrides (as of Next v14.2.0)
 export const redirect = fn(
diff --git a/code/frameworks/nextjs/src/export-mocks/router/index.ts b/code/frameworks/nextjs/src/export-mocks/router/index.ts
index 26ee30342c70..3bb4cec038e3 100644
--- a/code/frameworks/nextjs/src/export-mocks/router/index.ts
+++ b/code/frameworks/nextjs/src/export-mocks/router/index.ts
@@ -1,6 +1,6 @@
 import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors';
 
-import singletonRouter, * as originalRouter from 'next/dist/client/router';
+import singletonRouter, * as originalRouter from 'next/dist/client/router.js';
 import type { NextRouter, SingletonRouter } from 'next/router';
 import type { Mock } from 'storybook/test';
 import { fn } from 'storybook/test';
@@ -108,7 +108,7 @@ export const getRouter = () => {
 };
 
 // re-exports of the actual module
-export * from 'next/dist/client/router';
+export * from 'next/dist/client/router.js';
 export default singletonRouter;
 
 // mock utilities/overrides (as of Next v14.2.0)
diff --git a/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx b/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx
index 69b58866c510..1fcfc3cbfa0c 100644
--- a/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx
+++ b/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx
@@ -1,8 +1,8 @@
 import type { PropsWithChildren } from 'react';
 import React, { useMemo } from 'react';
 
-import initHeadManager from 'next/dist/client/head-manager';
-import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context.shared-runtime';
+import initHeadManager from 'next/dist/client/head-manager.js';
+import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context.shared-runtime.js';
 
 type HeadManagerValue = {
   updateHead?: ((state: JSX.Element[]) => void) | undefined;
diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx
index b13dfd70ba53..13dcaf795389 100644
--- a/code/frameworks/nextjs/src/preview.tsx
+++ b/code/frameworks/nextjs/src/preview.tsx
@@ -12,7 +12,7 @@ import { createNavigation } from '@storybook/nextjs/navigation.mock';
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
 import { createRouter } from '@storybook/nextjs/router.mock';
 
-import { isNextRouterError } from 'next/dist/client/components/is-next-router-error';
+import { isNextRouterError } from 'next/dist/client/components/is-next-router-error.js';
 
 import { HeadManagerDecorator } from './head-manager/decorator';
 import { ImageDecorator } from './images/decorator';
diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx
index 082548ec7df6..fa4c5b756f62 100644
--- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx
+++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx
@@ -12,13 +12,13 @@ import {
   AppRouterContext,
   GlobalLayoutRouterContext,
   LayoutRouterContext,
-} from 'next/dist/shared/lib/app-router-context.shared-runtime';
+} from 'next/dist/shared/lib/app-router-context.shared-runtime.js';
 import {
   PathParamsContext,
   PathnameContext,
   SearchParamsContext,
-} from 'next/dist/shared/lib/hooks-client-context.shared-runtime';
-import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment';
+} from 'next/dist/shared/lib/hooks-client-context.shared-runtime.js';
+import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment.js';
 
 import type { RouteParams } from './types';
 
diff --git a/code/frameworks/nextjs/src/routing/decorator.tsx b/code/frameworks/nextjs/src/routing/decorator.tsx
index f21819f373a4..575870b62831 100644
--- a/code/frameworks/nextjs/src/routing/decorator.tsx
+++ b/code/frameworks/nextjs/src/routing/decorator.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import type { Addon_StoryContext } from 'storybook/internal/types';
 
-import { RedirectBoundary } from 'next/dist/client/components/redirect-boundary';
+import { RedirectBoundary } from 'next/dist/client/components/redirect-boundary.js';
 
 import { AppRouterProvider } from './app-router-provider';
 import { PageRouterProvider } from './page-router-provider';
diff --git a/code/frameworks/nextjs/src/routing/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/page-router-provider.tsx
index 31cfd1ae175b..91c29ca14210 100644
--- a/code/frameworks/nextjs/src/routing/page-router-provider.tsx
+++ b/code/frameworks/nextjs/src/routing/page-router-provider.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 
 import { getRouter } from '@storybook/nextjs/router.mock';
 
-import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime';
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime.js';
 
 export const PageRouterProvider: React.FC<PropsWithChildren> = ({ children }) => (
   <RouterContext.Provider value={getRouter()}>{children}</RouterContext.Provider>