實作 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)。
遇到問題？
如果您遇到錯誤，請確認您的檔案有以下正確的程式碼：
如果您仍然卡住，歡迎在 GitHub Discussions 上向社群提問。如果您能將程式碼推送到 GitHub 並提供連結，其他人可以查看，這將會很有幫助。
總結
再次說明，以下是我們所做工作的圖形化總結：
我們還沒有顯示部落格的 markdown 內容。接下來讓我們來完成這部分。