如何在 NextJS 13 应用程序目录中使用 @next/mdx？答案

【问题标题】：How to use @next/mdx with NextJS 13 app directory?如何在 NextJS 13 应用程序目录中使用 @next/mdx？
【发布时间】：2023-02-16 07:26:37
【问题描述】：

使用新的应用目录，所有路由目录必须有一个page.js、page.jsx或page.tsx文件才能公开可见（例如：mywebsite.com/about需要一个文件app/about/page.js）。但是当我尝试使用 MDX 文件 app/about/page.mdx 并使用 nextMDX @next/mdx 时，我得到了 404 not found。

这是我的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"],
});

感谢您的回复

【问题讨论】：

我认为对 MDX 的应用程序目录支持仍在开发中。您可以在测试版文档 (beta.nextjs.org/docs) 中看到禁用的 MDX 条目。同时，您应该仍然可以像以前一样使用 pages-directory。
是的，正如您所说，该文档仍然不可用。我在 app 目录中尝试了 MDX，它作为客户端组件而不是页面
@maxcountryman - 在授予赏金时，这三个答案似乎都是通过将问题输入人工智能工具而生成的。 IE。回答的人实际上并不理解这个问题，答案可能是也可能不是垃圾。
同意，所有这些人工智能工具都会被虚假的答案或问题所填充......
GitHub讨论：github.com/vercel/next.js/issues/42757

标签： reactjs next.js mdxjs

【解决方案1】：

@next/mdx 获得updated on january 6, 2023，支持next.js 13 app目录

他们还在 nextjs 13 beta documentation 添加了一个 MDX 部分

在示例目录中现在有一个"app directory and MDX example"

【讨论】：