Merge pull request #25032 from storybookjs/valentin/fix-app-router-in…

…-nextjs

Next.js: Fix AppRouterProvider usage

code/frameworks/nextjs/package.json

@@ -32,6 +32,16 @@
       "require": "./dist/image-context.js",
       "import": "./dist/image-context.mjs"
     },
+    "./dist/routing/app-router-provider": {
+      "types": "./dist/routing/app-router-provider.d.ts",
+      "require": "./dist/routing/app-router-provider.js",
+      "import": "./dist/routing/app-router-provider.mjs"
+    },
+    "./dist/routing/app-router-provider-mock": {
+      "types": "./dist/routing/app-router-provider-mock.d.ts",
+      "require": "./dist/routing/app-router-provider-mock.js",
+      "import": "./dist/routing/app-router-provider-mock.mjs"
+    },
     "./preset": {
       "types": "./dist/preset.d.ts",
       "require": "./dist/preset.js"
@@ -161,6 +171,8 @@
       "./src/images/next-future-image.tsx",
       "./src/images/next-legacy-image.tsx",
       "./src/images/next-image.tsx",
+      "./src/routing/app-router-provider.tsx",
+      "./src/routing/app-router-provider-mock.tsx",
       "./src/font/webpack/loader/storybook-nextjs-font-loader.ts",
       "./src/swc/next-swc-loader-patch.ts"
     ],

code/frameworks/nextjs/src/dependency-map.ts

@@ -13,6 +13,10 @@ const mapping: Record<string, Record<string, string>> = {
     'next/dist/shared/lib/hooks-client-context.shared-runtime':
       'next/dist/shared/lib/hooks-client-context',
   },
+  '<13.0.0': {
+    '@storybook/nextjs/dist/routing/app-router-provider':
+      '@storybook/nextjs/dist/routing/app-router-provider-mock',
+  },
   '<13.5.0': {
     'next/dist/shared/lib/router-context.shared-runtime': 'next/dist/shared/lib/router-context',
     'next/dist/shared/lib/head-manager-context.shared-runtime':

code/frameworks/nextjs/src/routing/app-router-provider-mock.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+// The mock is used for Next.js < 13, where the AppRouterProvider doesn't exist
+export const AppRouterProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
+  return <>{children}</>;
+};

code/frameworks/nextjs/src/routing/decorator.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import type { Addon_StoryContext } from '@storybook/types';
 import { action } from '@storybook/addon-actions';
+// @ts-expect-error Using absolute path import to 1) avoid prebundling and 2) being able to substitute the module for Next.js < 13
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { AppRouterProvider } from '@storybook/nextjs/dist/routing/app-router-provider';
 import { PageRouterProvider } from './page-router-provider';
-import type { AppRouterProvider as TAppRouterProvider } from './app-router-provider';
 import type { RouteParams, NextAppDirectory } from './types';
 
 const defaultRouterParams: RouteParams = {
@@ -17,19 +19,6 @@ export const RouterDecorator = (
   const nextAppDirectory =
     (parameters.nextjs?.appDirectory as NextAppDirectory | undefined) ?? false;
 
-  const [AppRouterProvider, setAppRouterProvider] = React.useState<
-    typeof TAppRouterProvider | undefined
-  >();
-
-  React.useEffect(() => {
-    if (!nextAppDirectory) {
-      return;
-    }
-    import('./app-router-provider').then((exports) =>
-      setAppRouterProvider(() => exports.AppRouterProvider)
-    );
-  }, [nextAppDirectory]);
-
   if (nextAppDirectory) {
     if (!AppRouterProvider) {
       return null;