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正確的。