如何将 @next/mdx 与 NextJS 13 应用程序目录一起使用？

Question

对于新的应用程序目录，所有路由目录都必须有一个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 部分

在示例目录中现在有一个“应用程序目录和 MDX 示例”