在Next.js 13中使用MDX出现useContext错误的解决方法

问题原因 #

MDX依赖的@mdx-js/react库内部使用了React Context API，而Next.js 13 App Router下的页面默认是服务器组件，Context API无法在服务器组件中运行，因此触发该错误。

解决方法 #

方法1：直接在MDX页面添加客户端指令

在你的page.mdx文件最顶部添加"use client"指令，将该MDX页面标记为客户端组件：

"use client"

# Title

方法2：使用客户端组件包装MDX内容（可选）

如果不想直接修改MDX文件，可以创建一个客户端组件作为包装器，再导入MDX内容：

1. 创建app/docs/components/accordion/MDXClientWrapper.jsx：

"use client"
import AccordionMDX from './page.mdx'

export default function MDXClientWrapper() {
  return <AccordionMDX />
}

2. 将原page.mdx重命名为content.mdx，确保路由指向客户端包装器组件（保持page.jsx作为入口）。

额外检查 #

确认你的next.config.js配置正确，当前配置已经开启了App Router支持并注册了MDX扩展，无需修改：

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
})

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  experimental: {
    appDir: true,
  },
}

module.exports = withMDX(nextConfig)

内容的提问来源于stack exchange，提问作者Felipe Gouvêa