Next.js：如何从 getStaticProps 中获取静态资产

Posted 2023-02-22

【中文标题】Next.js：如何从 getStaticProps 中获取静态资产

【英文标题】：Next.js: How to get static assets from within getStaticProps

【发布时间】：2021-04-27 19:42:35

【问题描述】：

我正在使用 Netlify CMS。我想将轮播的所有幻灯片导入到我的组件中。我制作了一个名为滑块的集合并添加了一些幻灯片。这在public/content/slider/ 中创建了两个降价文件（每张幻灯片一个）。我想将它们全部导入一个可迭代对象中，以便构建轮播。

因为我为markdown文件设置了webpack loader，所以我可以导入单个markdown文件没有问题，像这样：

import post from '../public/content/posts/[post name].md

但是当我尝试使用require.context、require-context或导入fs时，就不行了。所以我决定尝试从getStaticProps 中要求这些库。但是getStaticProps 中的__dirname 是/，是我计算机文件系统的根目录。

所有getStaticProps 示例都使用数据获取。我缺少一些信息。如何导入/slides/文件夹中的所有markdown文件？

【参考方案1】：

这是 known issue in Next.js，__dirname 错误地解析为 / - 您应该改用 process.cwd()。

来自 Next.js Reading files 文档：

文件可以直接从getStaticProps中的文件系统读取。

为此，您必须获取文件的完整路径。

由于 Next.js 将您的代码编译到单独的目录中，因此您不能 使用__dirname 作为返回的路径将不同于 页面目录。

相反，您可以使用process.cwd()，它会为您提供所在的目录 Next.js 正在执行中。