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