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

4 2

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

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. 👍🏾

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more