[英]Next.js Link prefetch provoke 404 errors in production
I'm developing a blog using Next.JS.我正在使用 Next.JS 开发一个博客。 In this blog, I have a page where I present all of my articles.在这个博客中,我有一个展示我所有文章的页面。
The rendered component looks like this:渲染的组件如下所示:
<div>
{articles.map((article, index) => {
const path = `/magazine/${article.id}/${encodeURIComponent(
article.formatted_name
)}`;
return (
<Link key={article.id} href={path} as={path} prefetch>
<a>
<CardArticle article={article} index={index} />
</a>
</Link>
);
})}
</div>
Links are working just fine and in development mode, there are no error at all.链接工作得很好,在开发模式下,根本没有错误。 However, after a build, the Links are still working just fine, but the prefetch from the Links fail when I'm on the page with the presented list of articles:但是,在构建之后,链接仍然可以正常工作,但是当我在显示文章列表的页面上时,链接的预取失败:
Note if relevant: the list of articles if fetched using an API call in getServerSideProps
.如果相关,请注意:如果使用getServerSideProps
中的 API 调用获取文章列表。
Does anyone know why my <Link>
fail to prefetch but still work otherwise?有谁知道为什么我的<Link>
无法预取但仍然可以正常工作?
I believe the issue here is that you are using href
and as
incorrectly.我相信这里的问题是您使用的href
和as
不正确。 As per the docs , href should be thy dynamic link in the pages directory (such as /magazine/[id]/[name]
- change for your use case) and as
is correct.根据文档,href 应该是页面目录中的动态链接(例如/magazine/[id]/[name]
- 根据您的用例进行更改)并且as
正确的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.