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

我相信这里的问题是您使用的AND和SELECT REPLACE(SUBSTRING_INDEX(SUBSTRING_INDEX(SUBSTRING_INDEX(pm.meta_value, 'lat', -1), ';', 2), ':', -1), '"', '') AS latitude, REPLACE(SUBSTRING_INDEX(SUBSTRING_INDEX(SUBSTRING_INDEX(pm.meta_value, 'lng', -1), ';', 2), ':', -1), '"', '') AS longitude FROM wp_postmeta pm WHERE pm.meta_key = 'change_to_your_meta_key' AND ( 6371 * acos( cos( radians(" . $lat . ") ) * cos( radians( latitude ) ) * cos( radians( longitude ) - radians(" . $lng . ") ) + sin( radians(" . $lat . ") ) * sin( radians( longitude ) ) ) ) <= " . $radius . ")" 错误。根据{{​​3}}，href应该是您在pages目录中的动态链接（例如href-根据您的使用情况进行更改），并且as是正确的。