Question

我正在从API或动态获取所有链接，但是在预取它们时遇到了麻烦，我似乎无法弄清楚为什么。

所有页面都是在服务器端呈现的。

每次我悬停一个链接时，都会出现此错误：

GET https://development.server/_next/static/0_YgyPL5ev7zYK3SSr7J-/pages/page.js net::ERR_ABORTED 404. page-loader.js:33

我正在使用的链接示例

onst Header = ({ props, slugTv }) => {
  const router = useRouter();
  const { tv } = router.query;

  return (
      <header>
        <div className="header">
          <Link href="/[tv]/" as={`/${tv}/`}>
            <a>
              <img src={renderSwitch(tv)} alt={`${tv} logo`} />
            </a>
          </Link>
        </div>
      </header>

如果我错过了一些重要的细节，请发表评论，我将更新问题，这是我的下一个项目。

更新：

页面文件夹树

-pages
--[tv]//folder
--category//folder
---[cat].js
--index.js
-index.js

谢谢

Answer 1

我认为这可能与您的/中的结尾as有关。

对此进行更改，应该可以：

<Link href="/[tv]/" as={`/${tv}`}>

从该错误看来，它正在尝试预取：https://development.server/_next/static/0_YgyPL5ev7zYK3SSr7J-/pages/page.js

它应该尝试获取： https://development.server/_next/static/0_YgyPL5ev7zYK3SSr7J-/pages/[tv].js

因此，看起来好像是将链接解释为一个全新的页面，而不是您所指向的href。（不匹配？）

我发现this可能与之相关

预取不适用于动态路由Next.js

1 个答案: