Next.js开发模式仅触发Failed to load script未处理运行时错误咨询

问题根因 #

核心原因是Link组件填写的pathname和你实际的文件路由结构不匹配，Next.js 开发模式下客户端路由跳转前会预加载对应路由的chunk文件，按你填写的错误pathname找不到对应chunk就会触发报错，后续Next.js fallback到了正确的路由规则，所以页面最终能正常渲染。
生产环境构建时会提前编译所有路由的chunk并做路由兼容处理，所以不会复现；直接访问URL走服务端渲染逻辑，不走客户端预加载逻辑，也不会触发错误。

排查思路 #

1. 校验路由结构匹配度：对比Link的pathname定义与pages目录下的实际文件路径是否一致
2. 清理本地缓存：排查是否是.next目录下的旧编译产物、浏览器缓存导致的偶发错误
3. 版本校验：确认Next.js版本是否存在动态路由预加载相关的已知bug

解决方案 #

方案1：修正pathname匹配catch-all路由 #

你的详情页实际是catch-all路由[...slug]，需要按实际路由规则传参：

<Link
  href={{
    pathname: "/[cinemaId]/events/detail/[...slug]",
    query: {
      cinemaId: cinemaId,
      slug: [date, showtime.eventTypeId]
    }
  }}
>
  <a className="font-bold text-lg">{showtime.name}</a>
</Link>

方案2：使用字符串格式href避免拆分错误 #

直接拼接完整路径，降低路由匹配出错概率：

<Link href={`/${cinemaId}/events/detail/${date}/${showtime.eventTypeId}`}>
  <a className="font-bold text-lg">{showtime.name}</a>
</Link>

缓存问题临时修复 #

如果修改路由后仍有报错，执行以下操作清理本地编译缓存：

• 停止dev服务
• 删除项目根目录的.next文件夹
• 删除node_modules/.cache文件夹
• 重新执行npm run dev启动服务

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