如何使用ContentLayer创建自定义JSX组件？解决组件不生效问题

直接在MDX文件里导入自定义组件并不能正常工作，这是ContentLayer处理MDX内容的机制决定的。正确的实现方式是将自定义组件统一注入到MDX渲染流程中，具体步骤如下：

1. 先定义好你的自定义组件
2. 创建一个包含所有需要用到的自定义组件的对象
3. 使用useMDXComponent钩子获取MDX渲染组件，将组件对象作为components props传入
4. 在MDX文件中直接调用组件，无需额外导入

实用示例 #

1. 自定义组件示例

// components/Callout.jsx
export default function Callout({ children, type = "info" }) {
  const bgColor = type === "warning" ? "#fff3cd" : "#d1ecf1";
  const borderLeftColor = type === "warning" ? "#ffc107" : "#17a2b8";
  
  return (
    <div style={{ 
      padding: "1rem 1.5rem", 
      backgroundColor: bgColor, 
      borderRadius: "4px",
      borderLeft: `4px solid ${borderLeftColor}`,
      margin: "1rem 0"
    }}>
      {children}
    </div>
  );
}

2. 页面中处理MDX渲染的代码

// pages/posts/[slug].jsx
import { useMDXComponent } from "next-contentlayer/hooks";
import { allPosts } from "contentlayer/generated";
import Callout from "../../components/Callout";

export async function getStaticProps({ params }) {
  const post = allPosts.find(post => post.slug === params.slug);
  return { props: { post } };
}

export default function Post({ post }) {
  const MDXContent = useMDXComponent(post.body.code);
  // 注入需要的自定义组件
  const customComponents = {
    Callout,
    // 可在此添加更多自定义组件，比如<Button>、<Card>等
  };

  return (
    <div style={{ maxWidth: "800px", margin: "2rem auto", padding: "0 1rem" }}>
      <h1>{post.title}</h1>
      <MDXContent components={customComponents} />
    </div>
  );
}

3. MDX文件中的使用方式

---
title: "自定义组件测试"
slug: "custom-component-test"
---

这是一段普通的MDX文本内容。

<Callout type="warning">
  这是一个警告类型的提示框，不需要在MDX里导入就能直接用！
</Callout>

<Callout>
  这是默认的信息类型提示框。
</Callout>

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