如何在Contentlayer中配置MDX自定义元素？

当然可以实现类似Next.js官方MDX的自定义元素替换需求，下面是两种常用的落地方法：

方法一：渲染时直接传入自定义组件（推荐） #

这是最直观的方式，和Next.js官方MDX的思路一致，无需修改rehype/remark配置：

1. 在Next.js页面/组件中导入所需工具和生成的MDX数据：

import { useMDXComponent } from 'next-contentlayer/hooks'
import { allPosts } from 'contentlayer/generated'

2. 获取目标MDX文档的body.code，通过useMDXComponent生成组件并传入components配置替换原生标签：

export default function PostPage({ post }) {
  const MDXContent = useMDXComponent(post.body.code)
  
  return (
    <div className="post-content">
      <MDXContent
        components={{
          h1: (props) => <h1 className="text-4xl font-bold mb-6" {...props} />,
          h2: (props) => <h2 className="text-3xl font-semibold mb-4" {...props} />,
          // 可按需自定义p、a、ul等其他标签
        }}
      />
    </div>
  )
}

// 静态数据获取逻辑示例
export async function getStaticProps() {
  const post = allPosts.find(post => post.slug === 'your-post-slug')
  return { props: { post } }
}

这种方法优势是灵活，可在不同页面传入不同的自定义组件，完全掌控渲染逻辑。

方法二：通过rehype插件全局统一替换 #

如果需要所有MDX文档统一使用自定义标签，可通过rehype插件全局配置：

1. 安装依赖：

npm install rehype-wrap

2. 在contentlayer.config.ts中配置rehype插件（以替换h1为例）：

import { defineDocumentType, makeSource } from 'contentlayer/source-files'
import rehypeWrap from 'rehype-wrap'

export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.mdx`,
  contentType: 'mdx',
  fields: {
    // 你的文档字段配置，比如title、date等
  },
}))

export default makeSource({
  contentDirPath: 'posts',
  documentTypes: [Post],
  mdx: {
    rehypePlugins: [
      [
        rehypeWrap,
        {
          wrapper: 'CustomH1', // 自定义组件名称
          selector: 'h1', // 要替换的原生标签
        },
      ],
      // 可添加更多插件处理其他标签
    ],
  },
})

3. 在_app.tsx中通过MDXProvider全局注册自定义组件：

import { MDXProvider } from '@mdx-js/react'
import type { AppProps } from 'next/app'

const globalMDXComponents = {
  CustomH1: (props) => <h1 className="text-4xl font-bold text-gray-800" {...props} />,
}

export default function App({ Component, pageProps }: AppProps) {
  return (
    <MDXProvider components={globalMDXComponents}>
      <Component {...pageProps} />
    </MDXProvider>
  )
}

这种方法适合全局统一样式或组件逻辑的场景，一次配置即可覆盖所有MDX文档。

总结 #

• 单页面个性化需求选方法一，直接传入components；
• 全局统一配置需求选方法二，结合rehype插件和MDXProvider。

无需深入了解rehype/remark的底层逻辑，照着上述步骤就能快速实现自定义元素替换。

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