頁面路由 (Pages Router)：實作 getStaticProps

我們需要獲取必要的資料來渲染帶有指定 id 的文章。

為此，請再次打開 lib/posts.js 並在底部添加以下 getPostData 函式。它會根據 id 返回文章資料：

export function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
  // 使用 gray-matter 解析文章的中繼資料部分
  const matterResult = matter(fileContents);
 
  // 將資料與 id 合併
  return {
    id,
    ...matterResult.data,
  };
}

接著，打開 pages/posts/[id].js 並將這行程式碼：

import { getAllPostIds } from '../../lib/posts';

替換為以下程式碼：

import { getAllPostIds, getPostData } from '../../lib/posts';
 
export async function getStaticProps({ params }) {
  const postData = getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

現在文章頁面在 getStaticProps 中使用 getPostData 函式來獲取文章資料並將其作為 props 返回。

現在，讓我們更新 Post 元件以使用 postData。在 pages/posts/[id].js 中，將導出的 Post 元件替換為以下程式碼：

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
    </Layout>
  );
}

就是這樣！嘗試訪問以下頁面：

您應該可以看到每個頁面的部落格資料：

太好了！我們已成功生成動態路由 (dynamic routes)。

遇到問題？

如果您遇到錯誤，請確認您的檔案有以下正確的程式碼：

pages/posts/[id].js 應該看起來像這樣。
lib/posts.js 應該看起來像這樣。
（如果仍然無法運作）其餘程式碼應該看起來像這樣。

如果您仍然卡住，歡迎在 GitHub Discussions 上向社群提問。如果您能將程式碼推送到 GitHub 並提供連結，其他人可以查看，這將會很有幫助。

總結

再次說明，以下是我們所做工作的圖形化總結：

我們還沒有顯示部落格的 markdown 內容。接下來讓我們來完成這部分。

實作 getStaticProps

遇到問題？

總結

On this page