Next.js 链接预取在生产中引发 404 错误

Question

我正在使用 Next.JS 开发博客。 在这个博客中，我有一个展示我所有文章的页面。

渲染的组件如下所示：

<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>

链接工作正常，在开发模式下，完全没有错误。 但是，在构建之后，链接仍然可以正常工作，但是当我在显示文章列表的页面上时，从链接中预取失败：

如果相关请注意：文章列表（如果使用getServerSideProps 中的 API 调用获取）。

有谁知道为什么我的<Link> 无法预取但仍然可以正常工作？

Answer 1

我认为这里的问题是您错误地使用了href 和as。根据docs，href 应该是页面目录中的动态链接（例如/magazine/[id]/[name] - 根据您的用例更改）并且as 是正确的。