頁面路徑依賴外部資料

在上一課中，我們介紹了頁面內容依賴外部資料的情況。我們使用了 getStaticProps 來獲取渲染首頁所需的資料。

在本課中，我們將討論頁面路徑依賴外部資料的情況。Next.js 允許你根據外部資料靜態生成頁面路徑，這使得 Next.js 能夠支援動態 URL。

如何靜態生成具有動態路由的頁面

在我們的案例中，我們希望為部落格文章建立動態路由 (dynamic routes):

• 我們希望每篇文章的路徑為 /posts/<id>，其中 <id> 是頂層 posts 目錄下 Markdown 檔案的名稱。
• 由於我們有 ssg-ssr.md 和 pre-rendering.md，我們希望路徑分別為 /posts/ssg-ssr 和 /posts/pre-rendering。

步驟概述

我們可以按照以下步驟實現這一點。你現在還不需要進行這些更改 — 我們將在下一頁完成所有操作。

首先，我們將在 pages/posts 下建立一個名為 [id].js 的頁面。以 [ 開頭並以 ] 結尾的頁面在 Next.js 中是動態路由 (dynamic routes)。

在 pages/posts/[id].js 中，我們將編寫渲染文章頁面的程式碼 — 就像我們建立的其他頁面一樣。

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}

現在，這裡是新的部分：我們將從這個頁面匯出一個名為 getStaticPaths 的異步函數。在這個函數中，我們需要返回 id 的可能值列表。

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // 返回 id 的可能值列表
}

最後，我們需要再次實作 getStaticProps — 這次是為了獲取具有給定 id 的部落格文章所需的資料。getStaticProps 會接收包含 id 的 params 參數（因為檔案名稱為 [id].js）。

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // 返回 id 的可能值列表
}
 
export async function getStaticProps({ params }) {
  // 使用 params.id 獲取部落格文章的必要資料
}

以下是我們剛剛討論內容的圖形摘要：

讓我們在下一頁試試看吧！