Next.js 13项目中MDX组件无法渲染的问题求助

根据你遇到的 inAmpMode 解构错误、钩子调用失败及水合问题，结合Next.js 13 App Router的MDX配置规则，大概率是以下几个配置/代码问题导致的：

1. 残留了Pages Router的_document.js文件 #

App Router完全不需要pages/_document.js——这个文件是Pages Router用来自定义HTML结构的，在App Router中，HTML的控制由app/layout.tsx负责。如果你的项目根目录下还存在pages/_document.js，直接删除它即可。这个文件会和App Router的上下文系统冲突，引发inAmpMode相关的空值解构错误。

2. page.tsx的MDX渲染方式错误 #

在App Router的路由目录下，page.tsx需要直接导入并渲染MDX文件，不能使用Pages Router的静态生成方法（比如getStaticProps）。正确的写法应该是：

// app/blog/my-first-blog-post/page.tsx
import Hello from './hello.mdx';

export default function BlogPostPage() {
  return <Hello />;
}

如果你的page.tsx里有不符合App Router规范的代码（比如尝试手动处理MDX编译、使用Pages Router专属API），会触发钩子调用错误和水合失败。

3. next.config.js的MDX配置不兼容App Router #

确保你的next.config.js正确启用了App Router并配置MDX：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Next.js 13.4+ 无需再设置experimental.appDir，若使用更早版本需保留
  experimental: {
    mdxRs: true, // 可选，启用Rust版MDX编译器，提升性能
  },
};

const withMDX = require('@next/mdx')();
module.exports = withMDX(nextConfig);

如果配置中遗漏了withMDX包裹，或者错误禁用了App Router相关特性，会导致MDX文件无法正确编译渲染。

4. mdx-components.tsx的导出格式错误 #

根目录的mdx-components.tsx必须导出名为useMDXComponents的函数，用于扩展MDX默认组件。正确的模板如下：

// mdx-components.tsx
import type { MDXComponents } from 'mdx/types';

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // 可在这里自定义MDX组件，比如修改标题样式
    // h1: ({ children }) => <h1 className="text-3xl font-bold">{children}</h1>,
    ...components,
  };
}

如果这个文件导出的不是函数，或者函数签名错误，会破坏MDX的上下文传递，引发钩子调用异常。

排查以上几点后，重启开发服务器，访问路由应该就能正常显示MDX内容了。

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