Nextjs <Link> 预取返回 404

编程问答 2022-04-23

问题描述

我构建了一个使用动态路由的 Next.js 应用，我注意到 <Link> 预取的一些奇怪行为。

偶尔（通常在重建之后但并非总是如此）我的应用程序开始为给定页面上的所有预取返回 404。如果我点击一个链接，下一个页面会再次加载，但该页面上的所有预取都会开始 404。刷新页面几次后这个问题就会消失，但这并不总是一致的。

中断似乎只发生在我的动态路由上，每秒都使用 getStaticProps 和内容重新验证。下面是我如何构建链接的示例，请注意 tripname 将是一个动态值。

<Link href={`/trip/${tripname)}`}>
    <a>
        <Card className={classes.tripCardRoot} />
    </a>
</Link>

这是页面加载时发生的情况。

enter image description here

编辑：

我花了一天的时间深入研究这个问题，并提供了一些额外的细节来更好地描述我的经历。此错误肯定与我构建应用程序时有关，并且仅发生在构建过程后通过 fallback:true 函数中的 getStaticPaths() 属性生成的页面上。

显式构建的页面（例如在路径数组中）似乎不会出现此问题。我不确定这是否有意义，但似乎给定页面的前几次加载恢复到先前构建的版本而不是后备页面。只有在重新加载页面几次后，回退功能才会真正启动，然后将该页面构建为当前构建的一部分。从那时起，一切似乎都按预期进行，直到下一个构建过程重新开始。

还包括控制台日志的屏幕截图，表明 /_next/data/... 目录中存在问题。虽然我不确定这个错误实际上指的是什么。

enter image description here

解决方法

我遇到了完全相同的问题...经过 2 天的试验/错误，我终于找到了解决方案。但这不是 IMO 的最佳解决方案。

我从 <Link /> 更新了所有 next/link 组件并禁用了 prefetch 选项。进行此更改后，我的开发工具网络选项卡中不再显示任何 404 错误。对预先生成的 JSON 数据的所有 GET 请求现在只会在悬停时发生，而且神奇的是，它们现在不会导致 404...

我知道这不是最好的解决方案，但至少问题已经解决了...希望有人能给出更好的解决方案！

next-linkreactjsreactjsreactjsreactjs