Use MDX

01/23/2025

1. 安装依赖

pnpm add @next/mdx

2. 配置 next.config.ts

const withMDX = createMDX({
  extension: /\.mdx?$/,
});
 
export default withMDX(nextConfig);

3. 创建 mdx-components.tsx

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

4. 创建 mdx 文件

# Hello World
 
This is a test.

5. 创建 mdx 文件 with MDXComponents

在 mdx 文件中使用 MDXComponents

创建 React 组件

// hello-mdx.tsx
export default function HelloMDX() {
  return (...);
}

在 mdx 文件中使用

### Demo show HelloMDX
 
<HelloMDX />

Demo show HelloMDX

Hello MDX

This is a card component rendered from MDX with interactive components.

Glass Effect0

mdx 配置

mdx-components.tsx 文件中定义的映射，是在静态和动态编译时用到，如果使用 MDXRemote 组件，则不生效了。