DEV Community

Cover image for Using Code Hike within the Next.js app directory
Sebastian Sdorra
Sebastian Sdorra

Posted on • Originally published at sdorra.dev on

Using Code Hike within the Next.js app directory

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;
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
afullsnack profile image
afullsnack

Just implemented contentlayer and code-hike for my personal sites blog and this fixed the issue I was having, thanks for this love it. 👍🏾