页面路由：实现 getStaticProps | Next.js

我们需要获取必要数据来渲染带有指定 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>
  );
}

完成！尝试访问以下页面：

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

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

遇到问题？

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

pages/posts/[id].js 应与此文件一致。
lib/posts.js 应与此文件一致。
（如果仍未解决）其余代码应与此目录一致。

如果仍然无法解决，欢迎在 GitHub Discussions 向社区提问。若能将代码推送到 GitHub 并附上链接，将有助于他人查看你的代码。

总结

再次展示我们已完成工作的图示总结：

我们尚未显示博客的 markdown 内容。接下来让我们实现这一功能。

实现 getStaticProps

遇到问题？

总结

On this page