NextJS13 app目录使用@next/mdx出现404的解决方法

步骤1：安装必要依赖 #

App Router下使用MDX需要额外的loader支持，先确保安装核心依赖：

npm install @next/mdx @mdx-js/loader @mdx-js/react react react-dom

步骤2：修正next.config.mjs配置 #

调整配置文件，确保pageExtensions正确包含md和mdx，同时确认experimental.appDir已启用：

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],
  },
})

export default withMDX({
  experimental: {
    appDir: true,
  },
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})

步骤3：验证MDX文件内容与目录结构 #

• 确认文件路径为app/about/page.mdx，无拼写错误
• MDX文件需符合基本格式，示例：

# 关于我们

这是通过MDX渲染的关于页面内容。

额外排查点 #

• 确保Next.js版本在13.4及以上（App Router稳定版起始版本）
• 重启开发服务器，避免缓存导致配置未生效
• 检查同目录下是否存在其他page文件（如page.js）造成路由冲突

内容的提问来源于stack exchange，提问作者Mirado Andria