如何解决Next.js 13 app目录中MDX文件404无法访问问题？

核心原因 #

App Router与Pages Router的路由机制不同，不支持直接将.mdx文件作为page路由入口（比如app/page.mdx无法直接被识别为根路由页面），必须通过React组件导入MDX内容来渲染。

具体步骤 #

1. 保留现有next.config.js配置 #

你的当前配置已经满足MDX编译需求，无需修改：

/** @type {import('next').NextConfig} */
const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
    providerImportSource: "@mdx-js/react",
  },
})
const nextConfig = withMDX ({
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
  },
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
})

module.exports = nextConfig

2. 创建路由入口组件 #

在app目录下新建page.tsx文件，将.mdx文件作为React组件导入并渲染：

// app/page.tsx
import PageMDX from './page.mdx'

export default function HomePage() {
  return <PageMDX />
}

3. 保留原MDX文件 #

确保app/page.mdx文件存在，内容保持不变即可。

扩展：处理多个MDX页面（如博客文章） #

如果需要加载多个MDX文件（比如app/posts/[slug]/page.mdx），可以通过动态路由+静态生成的方式实现：

1. 在app/posts/[slug]/目录下创建page.tsx
2. 读取指定目录下的MDX文件，通过generateStaticParams预渲染所有页面：

// app/posts/[slug]/page.tsx
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter' // 需要安装gray-matter依赖

export async function generateStaticParams() {
  // 读取posts目录下的所有MDX文件
  const postsDir = path.join(process.cwd(), 'app/posts')
  const filenames = fs.readdirSync(postsDir).filter(f => f.endsWith('.mdx'))

  return filenames.map(filename => ({
    slug: filename.replace('.mdx', ''),
  }))
}

export default async function PostPage({ params }: { params: { slug: string } }) {
  // 动态导入对应slug的MDX文件
  const PostMDX = await import(`../${params.slug}.mdx`)
  return <PostMDX.default />
}

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