Next.js: Fix Link component override in appDirectory configuration

code/frameworks/nextjs/build-config.ts

@@ -28,6 +28,10 @@ const config: BuildEntries = {
         exportEntries: ['./navigation.mock'],
         entryPoint: './src/export-mocks/navigation/index.ts',
       },
+      {
+        exportEntries: ['./link.mock'],
+        entryPoint: './src/export-mocks/link/index.tsx',
+      },
       {
         exportEntries: ['./router.mock'],
         entryPoint: './src/export-mocks/router/index.ts',

code/frameworks/nextjs/package.json

@@ -47,6 +47,11 @@
     "./image-context": "./dist/image-context.js",
     "./images/next-image": "./dist/images/next-image.js",
     "./images/next-legacy-image": "./dist/images/next-legacy-image.js",
+    "./link.mock": {
+      "types": "./dist/export-mocks/link/index.d.ts",
+      "code": "./src/export-mocks/link/index.tsx",
+      "default": "./dist/export-mocks/link/index.js"
+    },
     "./navigation.mock": {
       "types": "./dist/export-mocks/navigation/index.d.ts",
       "code": "./src/export-mocks/navigation/index.ts",

code/frameworks/nextjs/src/export-mocks/link/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { fn } from 'storybook/test';
+
+const linkAction = fn().mockName('next/link::Link');
+
+const MockLink = React.forwardRef<HTMLAnchorElement, any>(function MockLink(
+  {
+    href,
+    as: _as,
+    replace,
+    scroll,
+    shallow,
+    prefetch,
+    passHref,
+    legacyBehavior,
+    locale,
+    onClick,
+    children,
+    ...rest
+  },
+  ref
+) {
+  const hrefString =
+    typeof href === 'object'
+      ? `${href.pathname || ''}${href.query ? '?' + new URLSearchParams(href.query).toString() : ''}${href.hash || ''}`
+      : href;
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    onClick?.(e);
+    linkAction(hrefString, { replace, scroll, shallow, prefetch, locale });
+  };
+
+  return (
+    <a ref={ref} href={hrefString} onClick={handleClick} {...rest}>
+      {children}
+    </a>
+  );
+});
+
+MockLink.displayName = 'NextLink';
+
+export default MockLink;
+export { MockLink as Link };

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

@@ -7,6 +7,7 @@ const mapping = {
   'next/navigation': '@storybook/nextjs/navigation.mock',
   'next/router': '@storybook/nextjs/router.mock',
   'next/cache': '@storybook/nextjs/cache.mock',
+  'next/link': '@storybook/nextjs/link.mock',
   ...getCompatibilityAliases(),
 };