如何使用@next/mdx与NextJS 13应用程序目录?

Question

对于新的app目录，所有路由目录必须有一个page.js,page.jsx或page.tsx文件才能公开可见(例如:mywebsite.com/about需要一个app/about/page.js文件)。但是当我尝试使用MDX文件app/about/page.mdx，并使用nextMDX@next/mdx时，我得到了一个404未找到。

这是我的next.config.mjs配置文件:

import nextMDX from "@next/mdx";
import remarkFrontmatter from "remark-frontmatter";
import rehypeHighlight from "rehype-highlight";

const withMDX = nextMDX({
extension: /.(md|mdx)$/,
options: {
remarkPlugins: [remarkFrontmatter],
rehypePlugins: [rehypeHighlight],
},
});
const nextConfig = {
experimental: {
appDir: true,
}
};
export default withMDX({
...nextConfig,
pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
});

感谢您的回复

Answer 1

@next/mdx于2023年1月6日更新，以支持next.js 13应用程序目录

他们还在nextjs 13 beta文档中添加了一个MDX部分

，在examples目录中现在有一个app目录和MDX example目录

Answer 2

根据Mirado Andria的评论，文档不完整，不像他们应该的那样工作，不得不玩很多，但我得到了完整的功能，并使用。mdx作为页面目录-甚至更好。

如果有人想快速入门或窃取大量代码，这里是- https://github.com/beeinger/next-mdx-blog

免责声明:在注释中解释的代码太多了，repo已经全部说明了