Using Code Hike within the Next.js app directory

#nextjs #mdx #contentlayer #react

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.