Mdx remote in nextjs14 using next.config.mjs issue

Question

the problem is that i am using MDXRemote in nextjs14 project, and i get string data from DB through server actions and it perfectly renders markdown text, but it seems like doesn't get applied withMDX options in next.config.mjs.

this is the source code of next.config.mjs

// const withMDX = require("@next/mdx")();
import remarkGfm from "remark-gfm";
import createMDX from "@next/mdx";
import rehypeSlug from "rehype-slug";
import rehypeAutolinkHeadings from "rehype-autolink-headings";

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Configure `pageExtensions` to include MDX files
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
  // Optionally, add any other Next.js config below
  images: {
    remotePatterns: [{ protocol: "https", hostname: "img.clerk.com" }],
  },
};

const withMDX = createMDX({
  // Add markdown plugins here, as desired
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [
      rehypeSlug,
      [
        rehypeAutolinkHeadings,`
        {
          behaviour: "append",
          properties: {
            ariaHidden: true,
            tabIndex: -1,
            className: "hash-link",
          },
        },
      ],
    ],
  },
});

// Merge MDX config with Next.js config

export default withMDX(nextConfig);

// module.exports = withMDX(nextConfig);

and this is the slug.tsx

import connectDB from "@/db/connectDB";
import { ObjectId } from "bson";
import "@/styles/atom-one-dark.css";
import styles from "./BrainSlug.module.css";
import { MDXRemote } from "next-mdx-remote/rsc";
import Link from "next/link";
import { auth } from "@clerk/nextjs";
import SlugDeleteBtn from "@/components/SlugDeleteBtn/SlugDeleteBtn";
import SlugEditBtn from "@/components/SlugEditBtn/SlugEditBtn";
import moment from "moment";

export default async function BrainSlug({ params }: { params: any }) {
  const slugId = params.brainSlug;
  const db = (await connectDB).db("n0wlk");

  const slug = await db
    .collection("brainPost")
    .findOne({ _id: new ObjectId(slugId) });

  if (!slug) {
    return <div>Page not Found</div>;
  }

  const { userId: authId } = auth();
  const userInfo = slug.author;
  const timeStamp = new Date(slug.createdAt.getHighBits() * 1000);
  const relativeTime = moment(timeStamp).fromNow();
  const time = timeStamp.toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });

  return (
    <div className={styles.container}>
      {authId === userInfo && (
        <div>
          <SlugEditBtn params={params} />
          <SlugDeleteBtn params={params} />
        </div>
      )}
      <Link href={"/brain"} className={styles.btnArchive}>
        <span>Click!</span>
        <span>Archive</span>
      </Link>

      <div className={styles.titleContainer}>
        <h1 className={styles.title}>{slug.title}</h1>
        <div className={styles.date}>
          <div>last modified {relativeTime}</div>
          <div> {time}</div>
        </div>
      </div>
      <div className={styles.slugContent}>
        <MDXRemote source={slug.content} />
      </div>
    </div>
  );
}```

 but seems like it does not work with MDXRemote , do youse know by any chance what the problem is ? 

i fetch the string data by server action in a slug's page.tsx and in that component i use the <MDXRemote />



i have tried putting options in <MDXRemote options={} />
and it sorta works but it returns loads of type error, and i couldn’t find any solution of it, and i wanted to follow the instruction from nextjs.org. `

Answer 1

Please follow the official documentation of nextJS. or otherwise, share your full code. so we cal debug this issue.

  // MDX text - can be from a local file, database, CMS, fetch.
  const res = await fetch('https://...')
  const markdown = await res.text()
  return <MDXRemote source={markdown} />

https://nextjs.org/docs/app/building-your-application/configuring/mdx

https://github.com/hashicorp/next-mdx-remote#react-server-components-rsc--nextjs-app-directory-support