使用Next 13动态MDX导入

oyxsuwqo 于 2023-03-29 发布在其他

关注(0)|答案(1)|浏览(140)

我刚刚按照Next13 + MDX Tutorial的方法操作，但是我仍然不确定如何动态加载我的mdx文件？我的mdx文件不在某个远程服务器上，所以我不需要next-mdx-remote。但是，我确实需要一种方法来根据我的路径加载不同的mdx文件（例如/blog/[slug]）。我所有的mdx文件都在同一个存储库中。
因此，当用户请求/blog/article-1时，我想导入我的article1.mdx文件。在教程中，这只是一个静态页面的硬编码导入：

import HelloWorld from './hello.mdx';

export default function Page() {
  return <HelloWorld />;
}

...但我需要的网页和进口是动态的。

next.js

来源：https://stackoverflow.com/questions/75678228/dynamic-mdx-imports-with-next-13

1条答案

按热度按时间

vktxenjb1#

在页面上，您可以运行将在服务器上运行的函数，如const blogPages = await getBlogPages();
在里面你可以这样做

const blogPath = "./src/app/blog/[slug]/";
const getBlogPages = async (): Promise<
  Array<{
    fileName: string;
    path: string;
  }>
> => {
  const blogPages = await glob("*.mdx", {
    cwd: blogPath,
  });
// and so on

现在，它仍然不完全一样，你会如何在下一个〈13，但它完成了你想要的

赞(0）回复(0）举报 2023-03-29

我来回答

使用Next 13动态MDX导入

1条答案

相关问题

热门标签

最新问答