你应该使用Storybook Addon Next Router。正如this answer所述，您需要在Next中运行Link，而Storybook不会加载Next，因此此插件将模拟Router。
在我的配置中，我需要做的就是：

// .storybook/preview.js
import { withNextRouter } from 'storybook-addon-next-router';

export const decorators = [withNextRouter()]

这应该可以解决了。

storybook-addon-next-router的设置有一点变化。
对于版本3.x：
将插件添加到.storybook/main.js中的配置：

module.exports = {
  ...config,
  addons: [
    ...your addons
    "storybook-addon-next-router",
  ],
};

将RouterContext.Provider添加到.storybook/preview.js：

import { RouterContext } from "next/dist/shared/lib/router-context"; // next 12
// import { RouterContext } from "next/dist/shared/lib/router-context"; // next 11.1
// import { RouterContext } from "next/dist/next-server/lib/router-context"; // next < 11.1

export const parameters = {
  nextRouter: {
    Provider: RouterContext.Provider,
  },
}

还有其他的选择（例如：自定义Next路由器提供的功能）。参见the documentation。

Storybook组件在Next环境和page组件（支持使用next/router）之外运行。因此，您将无法在您的Next页面及其子页面之外使用它。
Next的路由器功能是在Context API提供者中创建的，因此为了使用useRouter，您的组件必须是该提供者的子组件（在故事书的情况下，它永远不会是）。

您不再需要使用上一个答案中提到的storybook-addon-next-router包。您现在可以集成Next.js并自动使用Next router。参见docs here。

export const Example = {
  parameters: {
    nextjs: {
      router: {
        basePath: '/profile',
        query: {
           slug: "example-slug"
        }
      },
    }
  },
};