Next.js 包羅萬象 / 作為路由

Question

首先，如果這有點混亂，請道歉。 那是因為我也很困惑。
我對 Next.js 很陌生，我正在使用 WP 作為無頭 CMS 從 Gatsby 遷移一個站點。 我沒有建立原始網站，所以我繼承了大量我不熟悉的代碼。

我正在使用/pages/listing/[slug].js組件為該客戶端生成單獨的列表。 我通過在getStaticPaths查詢所有 slug 的列表來獲取路徑，並使用 slug 查詢數據庫以使用getStaticProps獲取頁面的數據。 到目前為止一切都很好。 現在唯一的問題是我被告知客戶想要保留他們目前的網址 - 例如listing/experience/location/product-name-here （其中product-name-here是我從 CMS 獲取的 slug） ，但我只知道如何在listing/product-name-here進行listing/product-name-here 。

到目前為止，我失敗的方法是：

• 將組件更改為[...slug].js ，但我因 slug 不是數組而抱怨。 即使我在獲取靜態路徑時手動將其更改為數組，因為只獲取了 slug，我仍然沒有使用正確的 url。
• 在Link組件上使用as道具。 它現在將我發送到我想要的鏈接，但我收到 500 錯誤。 如果我使用href屬性手動輸入網址（即listing/product-name-here ），頁面將正確加載，但網址錯誤。

我想知道是否有某種方法可以訪問 URL，但到目前為止我遇到的唯一事情是useRouter ，因為這是一個鈎子，我無法在組件本身之外使用它。

如果不清楚，請隨時提出任何問題。 我省略了代碼片段，因為我覺得我的方法從根本上是錯誤的，而不是我遇到的令人討厭的錯誤。

編輯該問題最終通過將fallback設置為true並為處理 API 相關數據的任何內容設置大量可選鏈接以及所有道具的空默認值來解決。 我的直覺仍然是這不是處理這個問題的正確“下一步”方式，但該項目是從 Gatsby 遷移過來的，並且有點硬，所以我只需要讓它工作。

Answer 1

編輯為第一個答案不起作用。

使用pages/listing/[...slug].js作為文件名，然后從getStaticPaths返回一個像這樣的對象：

  return {
    paths: [
      { params: { slug: ["path1"] } },
      { params: { slug: ["path2"] } },
      { params: { slug: ["deeper", "path"] } }
    ],
    fallback: false
  };

這意味着以下地址正在工作：

• 列表/路徑 1
• 列表/路徑2
• 列表/更深/路徑

然后，您可以從上下文context.params.slug中的getStaticProps中將 slug 作為數組訪問。 這將包含["path1"] 、 ["path2"]或["deeper", "path"]取決於訪問的頁面。

您可以在下面的沙箱中試用：

https://codesandbox.io/s/confident-microservice-lu2jl?file=/pages/listing/%5B...slug%5D.js