使用NextJS与MDX构建博客点击链接报错，请问该错误的含义是什么

错误含义 #

你遇到的是Next.js App Router架构下MDX集成的典型问题，核心原因是MDX渲染时内部的链接组件在服务端上下文调用了仅客户端可用的React Hooks，或者原生a标签触发路由跳转时没有走Next.js的内置路由逻辑，导致Hooks上下文丢失触发报错。

修复方案 #

• 首先配置MDX全局组件替换原生a标签，在项目根目录的mdx-components.tsx（Next.js 13+默认MDX配置文件）中添加如下代码：

import type { MDXComponents } from 'mdx/types'
import Link from 'next/link'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // 统一替换MDX内的原生a标签为Next.js Link组件
    a: ({ href, children, ...props }) => {
      // 站内跳转走Next.js路由
      if (href?.startsWith('/')) {
        return <Link href={href} {...props}>{children}</Link>
      }
      // 站外跳转用原生a标签新开页面
      return <a href={href} target="_blank" rel="noopener noreferrer" {...props}>{children}</a>
    },
    ...components,
  }
}

• 如果你自定义了链接组件且用到了useRouter、useEffect等客户端Hooks，必须在组件文件顶部添加'use client'指令，标记组件为客户端组件。
• 运行npm ls react react-dom next @mdx-js/loader检查依赖版本，确保所有React相关依赖版本号一致，避免版本不兼容导致的Hooks上下文异常。
• 如果你使用的是Pages Router，检查next.config.js中的MDX插件配置，确认没有额外覆盖内置的组件渲染逻辑。

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