如何解决从markdown文件夹生成next.js静态页面
我已经构建了一个静态 next.js 站点，并希望从 Markdown 文档文件夹中生成一组静态页面（但就这个问题而言，可以是任何内容 - 文本文件等）。想象一下我有这个 docs 文件夹：
/docs/foo/bar.md
/docs/foo/baz.md
/docs/bar/foo.md
...
/docs/foobar.md
我能发现完整 URL slug 的唯一方法是在构建时我可以递归 docs 文件夹并发现这些路径：
/docs/foo/bar
/docs/foo/baz
/docs/bar/foo
...
/docs/foobar
pages/docs/foo/[page].js
pages/docs/bar/[page].js
...但是我在代码时不知道这些子文件夹能够做到这一点，只有在我递归文档的构建时才知道。
我能找到的最近的东西是这样的一条万能路线：
pages/docs/[...slug].js
我知道我可以在应用程序中轻松链接到诸如 /docs/foo/bar 之类的路线，并且我知道我可以像在 this example 中那样在页面本身中获取 slug，但我不确定如果/如何使用 getStaticPaths 和 getStaticProps 在此文件中生成我需要的静态路径？
非常感谢任何帮助！
解决方法
我刚刚设法解决了这个对我来说不是很明显的问题...
在 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> 中，由于 getStaticPaths，next.js 期望提供的 slug 是路径部分的数组，因此构建数组数组可以解决它：
[...slug].js...然后 export async function getStaticPaths() {
// Load the docs from the file system and convert their relative docs paths to arrays
const docs = [["foo","bar"],["foo","baz"],["bar","foo"],["foobar"]];
return {
paths: docs.map((doc) => {
return {
params: {
slug: doc,},};
}),fallback: false,};
}
将被上面的每个数组调用，我可以检索降价并将内容准备为页面组件的道具。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
