Vercel Speed Insights编译失败求助：无法解析next/navigation.js模块

问题原因 #

next/navigation.js是Next.js 13+ App Router专属的API，而你的项目使用的是Pages Router（通过_app.tsx文件可判断），当前导入@vercel/speed-insights/next的方式仅适配App Router环境，导致编译时无法找到对应模块。

解决方案 #

方案1：适配Pages Router（推荐，无需升级Next.js） #

修改_app.tsx中的Speed Insights导入路径，改用Pages Router兼容的入口：

// 替换原有导入语句
import { SpeedInsights } from '@vercel/speed-insights/react';

修改完成后重新执行构建或部署流程即可。

方案2：升级Next.js并切换到App Router（若计划重构项目） #

如果你的项目打算迁移到Next.js 13+ App Router：

• 升级Next.js到13.4及以上版本：

  yarn upgrade next@latest
  

• 按照Next.js官方规范将Pages Router结构迁移为App Router（创建app目录、用layout.tsx替换_app.tsx等），此时原有@vercel/speed-insights/next的导入方式即可正常工作。

额外版本兼容检查 #

确认@vercel/speed-insights版本与你的Next.js版本匹配：

• 运行以下命令查看当前包版本：

  yarn list @vercel/speed-insights
  

• 若使用Next.js 12及以下版本，建议安装@vercel/speed-insights的1.x版本：

  yarn add @vercel/speed-insights@1.x
  

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