Storybook从6.5升级至7.4后出现No router instance found错误排查

问题原因 #

升级到@storybook/nextjs后，原storybook-addon-next-router的路由模拟方式不再适用，且你移除了RouterContext.Provider的配置，导致组件/Apollo Client中调用next/router相关API时找不到路由实例，抛出"No router instance found"错误。

解决方案 #

@storybook/nextjs内置了Next.js路由的模拟支持，无需额外安装第三方插件，只需在Storybook配置中补充路由上下文相关设置：

1. 配置preview.ts的全局路由参数 #

在升级后的preview.ts中添加nextRouter参数配置，提供默认的路由模拟上下文，同时恢复之前的next/image模拟（如果组件用到Next Image）：

import type { Preview } from '@storybook/react';
import 'tailwindcss/tailwind.css';
import * as nextImage from 'next/image';

// 模拟Next Image组件
Object.defineProperty(nextImage, 'default', {
  configurable: true,
  value: (props) => <img {...props} />,
});

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  // 配置全局Next Router模拟参数
  nextRouter: {
    path: '/',
    asPath: '/',
    query: {},
    push: () => Promise.resolve(true),
    replace: () => Promise.resolve(true),
  },
};

2. 针对特定Story自定义路由（可选） #

如果某个Story需要特定路由状态（比如带query参数、特定路径），可以在Story级别添加nextRouter参数覆盖全局配置：

export const DashboardStory = {
  parameters: {
    nextRouter: {
      path: '/dashboard',
      asPath: '/dashboard?tab=analytics',
      query: { tab: 'analytics' },
    },
  },
};

3. 排查Apollo与路由的依赖关系 #

检查Apollo Client的配置或请求逻辑，确认是否存在依赖next/router的场景（比如请求头携带当前路由信息、根据路由参数生成GraphQL变量）。如果有，确保Storybook提供的模拟路由能满足这些依赖，或者在MSW的请求处理中手动补充相关参数。

4. 验证MSW配置加载 #

确认staticDirs中的mockServiceWorker.js路径配置正确，Storybook启动后可正常访问/mockServiceWorker.js，避免MSW未注册导致的请求异常被误判为路由问题。

内容的提问来源于stack exchange，提问作者Ion