实现 getStaticProps

我们需要获取必要的数据来渲染具有给定 id 的文章。

为此，再次打开 lib/posts.js 并添加以下 getPostData 函数到底部。它将根据 id 返回文章数据。

export function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents);

  // Combine the data with the 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,
    },
  };
}

文章页面现在正在使用 lib/posts.js 中的 getPostData 函数在 getStaticProps 中获取文章数据并将其作为 props 返回。

现在，让我们更新 Post 组件以使用 postData。在 pages/posts/[id].js 中，将导出的 Post 组件替换为以下代码

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

就是这样！尝试访问以下页面

• https://127.0.0.1:3000/posts/ssg-ssr
• https://127.0.0.1:3000/posts/pre-rendering

你应该能够看到每个页面的博客数据。

太棒了！我们已经成功生成了 动态路由。

出现错误？

如果你遇到错误，请确保你的文件包含正确的代码

• pages/posts/[id].js 应该 如下所示。
• lib/posts.js 应该 如下所示。
• （如果仍然无法正常工作）其余代码应该 如下所示。

如果你仍然遇到问题，请随时在 GitHub 讨论区 中询问社区。如果你能将你的代码推送到 GitHub 并链接到它，这将非常有帮助，以便其他人可以查看。

总结

再次强调，以下是我们所做工作的图形化总结

我们还没有显示博客的 **Markdown 内容**。让我们在下一步中完成它。