reactjs 如何在NextJS 13应用程序中生成读取本地数据的静态页面?

5vf7fwbs  于 2023-05-28  发布在  React
关注(0)|答案(1)|浏览(195)

我完成了他们的博客教程,它工作得很好。它从本地存储的.md博客文章创建动态页面。真漂亮
但我正在碰壁,试图做一个看似简单的修改。
我想添加搜索和过滤到博客文章。为此,我们需要“使用客户端”。而且fs模块在客户端上不工作。他们的文档建议使用fetch API,但这不适用于本地文件,因为它们不是URL。getStaticProps()在使用/app路由器时被弃用,我相信在旧版本中我可以运行它,并在构建时运行我的fs函数
这是需要运行的两个函数之一。

export async function getPostData(id: string) {
  const fullPath = path.join(process.cwd(), `/public/posts/${id}.md`);
  const fileContents = fs.readFileSync(fullPath, "utf8");

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

  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);

  const contentHtml = processedContent.toString();

  const blogPostWithHTML: BlogPost & { contentHtml: string } = {
    id,
    title: matterResult.data.title,
    date: matterResult.data.date,
    tags: matterResult.data.tags,
    contentHtml,
  };
  // Combine the data with the id
  return blogPostWithHTML;
}

所以我相信我要么需要在构建时运行这些函数,为每篇博客文章生成静态页面(只有2篇)。或者我需要一些客户端的方式来读取本地文件。这就像任何可以将.md转换为字符串的东西一样简单!
(我不能做SSR,因为我是静态生成整个网站,并简单地将其托管在S3上的cloudfront发行版)

zvokhttg

zvokhttg1#

通过运行在父服务器组件中使用'fs'的实用程序函数,然后将转换后的文本传递到可搜索(客户端)博客部分,其中动态博客文章页面可以接受 prop 并使用SSG呈现。
这样做也有缺点,你需要一次在所有Markdown文件上运行它,而不是只获取所需的或当前显示的内容。
但它有效!

相关问题