動態路由

動態路由的細節

這裡是有關動態路由的重要細節。

對外部 API 發起請求或對資料庫進行查詢

如同 getStaticProps，getStaticPaths 能夠對資料來源請求資料。在我們的例子中，getAllPostIds（在 getStaticPaths 中使用）可以對外部 API 進行資料請求：

  export async function getAllPostIds() {
    // Instead of the file system,
    // fetch post data from an external API endpoint
    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 在打包階段執行。

回呼函式

試著回憶一下我們在 getStaticPaths 返回的 fallback: false 部分。這個用意是什麼？

如果 fallback 為 false，那麼任何路徑都不會被 getStaticPaths 返回，這將會導致 404 頁面 的結果。

如果 fallback 為 true，那麼 getStaticPaths 的行為會變成：

• 被 getStaticPaths 返回的路徑會在打包階段渲染成 HTML。
• 在打包階段未被產生的路徑將不會導致404錯誤頁面。而是 Next.js 在第一次對於這些路徑請求時提供一個回呼函式版本的頁面。
• 在背景，Next.js 會靜態產生請求的路徑。後面如果又請求相同的路徑的話就會提供之前已經產生好的頁面，就像其他頁面在打包階段就會進行預渲染一樣。

如果 fallback 為 blocking，新的路徑將會利用 getStaticProps 進行伺服器端的渲染，且為了之後的請求進行快取，所以每個路徑知會發生一次這樣的過程。

這已經超出這堂課要談的內容了，但是如果想了解更多有關 fallback: true 和 fallback: 'blocking 細節的話請參考 fallback 文件。

取得所有的路徑

動態路由可以藉由在 [] 新增（...）的方式來取得所有的路徑。比方說：

• pages/posts/[...id].js 可以匹配 /posts/a， 及 /posts/a/b，/posts/a/b/c 以此類推。

不過如果你這麼做的話，在 getStaticPaths 中，你必須回傳一個陣列作為 id 鍵的值，像是這樣：

  return [
    {
      params: {
        // Statically Generates /posts/a/b/c
        id: ['a', 'b', 'c'],
      },
    },
    //...
  ];

且 params.id 在 getStaticProps 中將會是陣列的形式：

  export async function getStaticProps({ params }) {
    // params.id will be like ['a', 'b', 'c']
  }

查看取得所有路徑的文件說明來了解更多。

路由

如果你想操作 Next.js 路由的話，可以藉由引入 next/router 中的 useRouter 來使用。

404 頁面

為了建立一個客製化的 404 頁面，請建立一支 pages/404.js 的檔案。這隻檔案在打包階段會被靜態產生出來。

  // pages/404.js
  export default function Custom404() {
    return <h1>404 - Page Not Found</h1>;
  }

前往錯誤頁面文件了解更多。

其他範例

我們目前為止建立了許多範例來闡述 getStaticProps 及 getStaticPaths— 查看原始碼來了解更多：

• Blog Starter using markdown files（Demo）
• WordPress Example（Demo）
• DatoCMS Example（Demo）
• TakeShape Example（Demo）
• Sanity Example（Demo）

結束了！

在下一堂課，我們將會探討 Next.js 的 API 路由。

← 返回上一頁 前往下一課 →