mdx-components.js

mdx-components.js|tsx 文件是将 @next/mdx 与 App Router 一起使用必需的文件，没有它将无法工作。此外，您还可以使用它来自定义样式。

在项目的根目录中使用文件 mdx-components.tsx（或 .js）来定义 MDX 组件。例如，与 pages 或 app 处于同一级别，或者在 src 内部（如果适用）。

mdx-components.tsx

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

导出

`useMDXComponents` 函数

文件必须导出单个函数，可以是默认导出或命名为 useMDXComponents。

mdx-components.tsx

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}