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

vs3odd8k 于 2022-12-03 发布在 React

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

bounty将在2天后过期。回答此问题可获得+50声望奖励。maxcountryman希望吸引更多人关注此问题。

对于新的应用程序目录，所有路由目录都必须具有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"],
});

感谢您的回复

reactjs

来源：https://stackoverflow.com/questions/74493702/how-to-use-next-mdx-with-nextjs-13-app-directory

1条答案

按热度按时间

szqfcxe21#

要将@next/mdx包与Next.js中的新app目录一起使用，需要将.mdx文件扩展名添加到下一个.config.mjs文件的pageExtensions数组中。
下面的示例说明如何修改下一个.config.mjs文件以包含.mdx文件扩展名：

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"], // include .mdx in pageExtensions
});

这将允许Next.js识别并提供应用程序目录中的MDX文件。

赞(0）回复(0）举报 2022-12-03

我来回答

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

1条答案

相关问题

热门标签

最新问答