頁面路由 (Pages Router)：動態路由詳情

獲取外部 API 或查詢資料庫

與 getStaticProps 類似，getStaticPaths 可以從任何資料來源獲取資料。在我們的範例中，getAllPostIds（由 getStaticPaths 使用）可以從外部 API 端點獲取資料：

export async function getAllPostIds() {
  // 取代檔案系統，
  // 從外部 API 端點獲取文章資料
  const res = await fetch('..');
  const posts = await res.json();
  return posts.map((post) => {
    return {
      params: {
        id: post.id,
      },
    };
  });
}

開發環境 vs. 生產環境

在開發環境（npm run dev 或 yarn dev）中，getStaticPaths 會在_每次請求_時執行。
在生產環境中，getStaticPaths 會在_建置時_執行。

後備方案 (Fallback)

還記得我們從 getStaticPaths 返回了 fallback: false。這是什麼意思？

如果 fallback 設為 false，則任何未由 getStaticPaths 返回的路徑將導致404 頁面。

如果 fallback 設為 true，則 getStaticProps 的行為會改變：

由 getStaticPaths 返回的路徑將在建置時渲染為 HTML。
未在建置時生成的路徑不會導致 404 頁面。相反，Next.js 會在首次請求此類路徑時提供頁面的「後備」版本。
在後台，Next.js 會靜態生成請求的路徑。對同一路徑的後續請求將提供生成的頁面，就像其他在建置時預渲染的頁面一樣。

如果 fallback 設為 blocking，則新路徑將使用 getStaticProps 進行伺服器端渲染，並快取以供未來請求使用，因此每條路徑只會發生一次。

這超出了本課程的範圍，但您可以在 fallback 文件中了解更多關於 fallback: true 和 fallback: 'blocking' 的資訊。

萬用路由 (Catch-all Routes)

動態路由可以通過在括號內添加三個點（...）來擴展以匹配所有路徑。例如：

pages/posts/[...id].js 匹配 /posts/a，但也匹配 /posts/a/b、/posts/a/b/c 等。

如果您這樣做，在 getStaticPaths 中，您必須像這樣返回一個陣列作為 id 鍵的值：

return [
  {
    params: {
      // 靜態生成 /posts/a/b/c
      id: ['a', 'b', 'c'],
    },
  },
  //...
];

並且 params.id 在 getStaticProps 中將是一個陣列：

export async function getStaticProps({ params }) {
  // params.id 將類似於 ['a', 'b', 'c']
}

查看萬用路由文件以了解更多。

路由 (Router)

如果您想訪問 Next.js 的路由器，可以通過從 next/router 導入 useRouter 鉤子來實現。

404 頁面

要創建自訂 404 頁面，請創建 pages/404.js。此檔案將在建置時靜態生成。

// pages/404.js
export default function Custom404() {
  return <h1>404 - 頁面未找到</h1>;
}

查看我們的錯誤頁面文件以了解更多。

就是這樣！

在下一課中，我們將討論 Next.js 中的 API 路由 (API Routes)。

動態路由詳情