升级Next.js 13后Storybook构建报错：无法解析router-context模块

这个报错的核心原因是Next.js 13重构了路由内部模块，你当前使用的next-router-mock@0.9.1和storybook-addon-next-router@4.0.2依赖的旧版路由上下文路径next/dist/next-server/lib/router-context在Next.js 13中已被移除或重命名，导致依赖无法找到对应模块。

具体修复步骤： #

• 升级next-router-mock到1.0.0及以上版本：该版本开始正式支持Next.js 13的路由结构
• 升级storybook-addon-next-router到5.0.0及以上版本：5.x版本适配了Next.js 13的路由系统
• （可选但推荐）将Storybook从6.5.x升级到7.x版本：Storybook 7对Next.js 13的兼容性更好，能减少其他潜在适配问题

执行以下命令更新依赖（根据你的包管理器选择）：

# npm
npm install next-router-mock@latest storybook-addon-next-router@latest @storybook/react@latest @storybook/addon-essentials@latest @storybook/builder-webpack5@latest @storybook/manager-webpack5@latest

# yarn
yarn add next-router-mock@latest storybook-addon-next-router@latest @storybook/react@latest @storybook/addon-essentials@latest @storybook/builder-webpack5@latest @storybook/manager-webpack5@latest

额外注意事项： #

如果升级后仍有问题，检查你的Storybook配置文件（.storybook/main.js或.storybook/main.ts），确保Webpack配置没有硬编码旧版Next.js的路径；同时确认组件中使用next-router-mock的方式是否符合新版规范（比如导入路径是否变化）。

重新运行storybook build，即可解决模块找不到的问题。

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