如何使用 contentlayer 创建自定义 JSX 组件？

Question

我尝试使用 contentlayer 创建自定义组件，但它没有按预期工作。起初，我认为我必须在 .mdx 文件中导入自定义组件。但是，每次我这样做时，contentlayer 都会抛出错误并且不会将我的 .mdx 文件转换为 json 格式。当我深入研究这个问题时，我找到了一个解决方案，我在下面分享。

Answer 1

// page.tsx

import { useMDXComponent } from "next-contentlayer/hooks";

const Button = () => {
  return <button>Click me</button>;
};

const customComponents = {
  Button
};


const SinglePost = ({ article }) => {

  const MDXContent = useMDXComponent(article.body.code);

  return (
    <>
      <MDXContent components={customComponents} />
    </>
  );
};

// file.mdx

### Call Button directly in your mdx file. No need to import it, it works automatically.

<Button />