預取不適用於動態路由 Next.js

Question

我從 API 或動態獲取我的所有鏈接，但我無法預取它們，我似乎不知道為什么。

所有頁面都是服務器端呈現的。

每次我 hover 鏈接時，我都會收到此錯誤：

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 。 （不匹配？）

我發現這可能是相關的