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不正确。 根据文档，href 应该是页面目录中的动态链接（例如/magazine/[id]/[name] - 根据您的用例进行更改）并且as正确的。