After setting up MDX with Next.js 14, I encountered an error when navigating to the mdx page:
Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.The file mdx-components.tsx is located in the root of the app directory.
(app/mdx-components.tsx)
This is my next.config.mjs:
import nextMDX from "@next/mdx";
/** @type {import('next').NextConfig} */
const nextConfig = {
env: {
AIRTABLE_API_KEY: process.env.AIRTABLE_API_KEY,
},
pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
};
const withMDX = nextMDX({
options: {
remarkPlugins: [],
rehypePlugins: [],
},
});
export default withMDX(nextConfig);
Here's the content of mdx-components.tsx:
import type { MDXComponents } from "mdx/types";
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
};
}
The page I want to display is located at app/work/page.mdx
page.mdx simply contains the title in markdown format.
Some solutions I've tried include:
- Referring to the Official Docs
- Checking out this GitHub issue: Issue persists. Most of them were suggesting to add
mdx-components.tsxat root directory which I already have - Reading through this StackOverflow post: Using MDX with NextJS 13 returning useContext error