I'm using MDX, with Contentlayer and for the code listing I'm using the wonderful Code Hike library.
Next.js 13 had some problems with the usage of contentlayer and the app directory, but this issues are fixed with the version 13.0.3 of Next.js.
But as I tried to integrate Code Hike, the application fails with the following error TypeError: ke.createContext is not a function
.
We can fix the error by making our Markdown component a client component:
"use client";
import { useMDXComponent } from "next-contentlayer/hooks";
type Props = {
code: string;
};
const Markdown = ({ code }: Props) => {
const MDXComponent = useMDXComponent(code);
return (
<div className="prose prose-zinc">
<MDXComponent />
</div>
);
};
export default Markdown;
The essential part is the first line. The use client
makes the component a client component. With this separate component we are able to use Code Hike.
Top comments (1)
Just implemented contentlayer and code-hike for my personal sites blog and this fixed the issue I was having, thanks for this love it. 👍🏾