storybook搭配Next.js Router报NextContext.Provider未定义如何解决

NextContext.Provider is undefined, please add it to parameters.nextRouter.Provider

• 第一步：修正RouterContext导入路径
  你当前使用的导入路径是Next.js 10及更早版本的旧路径，版本迭代后该路径已失效，根据你使用的Next.js版本替换对应导入语句：
  • Next.js 11~12 版本：替换preview.js的导入为 import { RouterContext } from "next/dist/shared/lib/router-context";
  • Next.js 13+ Pages Router 版本：替换preview.js的导入为 import { RouterContext } from "next/dist/shared/lib/router-context.shared-runtime";
  • Next.js 13+ App Router 使用next/navigation的useRouter：该插件对App Router适配不完善，建议直接手动mockuseRouter，无需使用该插件
• 第二步：验证插件版本适配
  确认安装的storybook-addon-next-router版本与你的Next.js大版本匹配：3.x版本适配Next.js 12及以下，4.x版本适配Next.js 13+
• 第三步：清理缓存重启服务
  配置修改后执行npx storybook dev --no-cache启动服务，避免旧缓存导致配置未生效
• 第四步：替代方案（手动mock，兼容性更强）
  如果插件配置始终不生效，可以直接在preview.js中全局mockuseRouter，无需依赖第三方插件：

  // 针对next/router（Pages Router）的mock示例
  import * as NextRouter from 'next/router';
  
  export const decorators = [
    (Story) => {
      jest.spyOn(NextRouter, 'useRouter').mockReturnValue({
        route: '/',
        pathname: '/',
        query: {},
        asPath: '/',
        push: jest.fn(),
        replace: jest.fn(),
        prefetch: jest.fn(),
        back: jest.fn(),
        // 可根据组件实际使用的router属性补充
      });
      return <Story />;
    }
  ];
  

  如果使用App Router的useRouter，将导入路径改为next/navigation即可。

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