Next.js Discord

Discord Forum

Next.js 14 with MDX - Server Components Error.

Unanswered
pheralb posted this in #help-forum
Open in Discord
Hi everyone 🙂, I am configuring a Next.js app (14 with /app router) to support MDX files in /app. I am following this guide: https://nextjs.org/docs/app/building-your-application/configuring/mdx & using:
"@mdx-js/loader": "3.0.0",
"@mdx-js/react": "3.0.0",
"@next/mdx": "14.0.1",
"@types/mdx": "2.0.9"

I have created the following files:
📂 app
  📂 docs
    📂 getting-started
      📄 page.mdx

My next.config.mjs:
import createMDX from "@next/mdx";

// Next.js config:
/** @type {import('next').NextConfig} */
const nextConfig = {
  swcMinify: true,
  reactStrictMode: true,
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
  experimental: {
    mdxRs: true,
  },
};

// MDX config:
const withMDX = createMDX({
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
});

export default withMDX(nextConfig);

And the error:
Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

I have checked this example: https://github.dev/vercel/next.js/tree/canary/examples/app-dir-mdx but I can't find the error 😢

0 Replies