use next.js internal paths instead of *.actual paths

MIGRATION.md

@@ -412,13 +412,7 @@
 
 #### @storybook/nextjs requires specific path aliases to be setup
 
-In order to properly mock the `next/router`, `next/header`, `next/navigation` and `next/cache` APIs, the `@storybook/nextjs` framework includes internal Webpack aliases to those modules. If you use portable stories in your Jest configuration, you will run into the following issue:
-
-```
-Cannot find module 'next/navigation.actual' from 'node_modules/@storybook/nextjs/dist/export-mocks/navigation/index.js'
-```
-
-To fix it, you should set the aliases in your Jest config files `moduleNameMapper` property using the `getPackageAliases` helper from `@storybook/nextjs/export-mocks`:
+In order to properly mock the `next/router`, `next/header`, `next/navigation` and `next/cache` APIs, the `@storybook/nextjs` framework includes internal Webpack aliases to those modules. If you use portable stories in your Jest tests, you should set the aliases in your Jest config files `moduleNameMapper` property using the `getPackageAliases` helper from `@storybook/nextjs/export-mocks`:
 
 ```js
 const nextJest = require("next/jest.js");
@@ -432,6 +426,8 @@ const customJestConfig = {
 module.exports = createJestConfig(customJestConfig);
 ```
 
+This will make sure you end using the correct implementation of the packages and avoid having issues in your tests.
+
 ## From version 7.x to 8.0.0
 
 ### Portable stories

code/frameworks/nextjs/src/export-mocks/cache/index.ts

@@ -1,8 +1,17 @@
 import { fn } from '@storybook/test';
-
-// re-exports of the actual module
-export * from 'next/cache.actual';
+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';
 
 // mock utilities/overrides (as of Next v14.2.0)
-export const revalidatePath = fn().mockName('revalidatePath');
-export const revalidateTag = fn().mockName('revalidateTag');
+const revalidatePath = fn().mockName('revalidatePath');
+const revalidateTag = fn().mockName('revalidateTag');
+
+const cacheExports = {
+  unstable_cache,
+  revalidateTag,
+  revalidatePath,
+  unstable_noStore,
+};
+
+export default cacheExports;
+export { unstable_cache, revalidateTag, revalidatePath, unstable_noStore };

code/frameworks/nextjs/src/export-mocks/headers/index.ts

@@ -1,8 +1,8 @@
 import { fn } from '@storybook/test';
-import * as originalHeaders from 'next/headers.actual';
+import * as originalHeaders from 'next/dist/client/components/headers';
 
 // re-exports of the actual module
-export * from 'next/headers.actual';
+export * from 'next/dist/client/components/headers';
 
 // mock utilities/overrides (as of Next v14.2.0)
 export { headers } from './headers';

code/frameworks/nextjs/src/export-mocks/navigation/index.ts

@@ -1,7 +1,7 @@
 import type { Mock } from '@storybook/test';
 import { fn } from '@storybook/test';
 import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors';
-import * as originalNavigation from 'next/navigation.actual';
+import * as originalNavigation from 'next/dist/client/components/navigation';
 
 let navigationAPI: {
   push: Mock;
@@ -53,7 +53,7 @@ const getRouter = () => {
 };
 
 // re-exports of the actual module
-export * from 'next/navigation.actual';
+export * from 'next/dist/client/components/navigation';
 
 // mock utilities/overrides (as of Next v14.2.0)
 const redirect = fn().mockName('redirect');

code/frameworks/nextjs/src/export-mocks/router/index.ts

@@ -2,7 +2,7 @@ import type { Mock } from '@storybook/test';
 import { fn } from '@storybook/test';
 import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors';
 import type { NextRouter, SingletonRouter } from 'next/router';
-import singletonRouter, * as originalRouter from 'next/router.actual';
+import singletonRouter, * as originalRouter from 'next/dist/client/router';
 
 const defaultRouterState = {
   route: '/',
@@ -106,7 +106,7 @@ const getRouter = () => {
 };
 
 // re-exports of the actual module
-export * from 'next/router.actual';
+export * from 'next/dist/client/router';
 export default singletonRouter;
 
 // mock utilities/overrides (as of Next v14.2.0)

code/frameworks/nextjs/src/export-mocks/webpack.ts

@@ -12,20 +12,15 @@ export const getPackageAliases = ({ useESM = false }: { useESM?: boolean } = {})
   const routerPath = join(packageLocation, `/dist/export-mocks/router/index.${extension}`);
 
   return {
-    // "*.actual" paths are used as reexports of the original module
-    'next/headers.actual': require.resolve('next/headers'),
     'next/headers': headersPath,
     '@storybook/nextjs/headers.mock': headersPath,
 
-    'next/navigation.actual': require.resolve('next/navigation'),
     'next/navigation': navigationPath,
     '@storybook/nextjs/navigation.mock': navigationPath,
 
-    'next/router.actual': require.resolve('next/router'),
     'next/router': routerPath,
     '@storybook/nextjs/router.mock': routerPath,
 
-    'next/cache.actual': require.resolve('next/cache'),
     'next/cache': cachePath,
     '@storybook/nextjs/cache.mock': cachePath,
   };

code/frameworks/nextjs/src/globals.d.ts

@@ -1,15 +1,3 @@
 declare module 'next/dist/compiled';
 declare module 'next/dist/compiled/babel/plugin-transform-modules-commonjs';
 declare module 'next/dist/compiled/babel/plugin-syntax-jsx';
-declare module 'next/navigation.actual' {
-  export * from 'next/navigation';
-}
-declare module 'next/router.actual' {
-  export * from 'next/router';
-}
-declare module 'next/cache.actual' {
-  export * from 'next/cache';
-}
-declare module 'next/headers.actual' {
-  export * from 'next/headers';
-}