Next.js Discord

Discord Forum

MDX Not working

Unanswered
Pacific herring posted this in #help-forum
Open in Discord
Pacific herringOP
I'm trying to render remote MDX but nothing works, only bold italic etc.

next.config.js:
export default withMDX({
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
  },
})(config);


import { MDXRemote } from "next-mdx-remote/rsc";
<MDXRemote source={targetPackage.description} />

22 Replies

Pacific herringOP
Purple Martin
Hey 🙂 Did you make sure to add the mdx-components.tsx file ?
Pacific herringOP
Yes I have this:

import type { MDXComponents } from "mdx/types";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  };
}
Purple Martin
And if so, I'd suggest you use this wonderful repo to get a nice rendering on your markdown : https://github.com/sindresorhus/github-markdown-css
Pacific herringOP
but the output isn't correct right?
Purple Martin
Oooh wait
Pacific herringOP
# Title should be a h1, but it's just nothing
Purple Martin
Lemme check, I had the same issue
2 mins
It seems weaird to have the quotes around the MD content
How are you storing your MD ?
Pacific herringOP
          <MDXRemote
            source={`# Hello World
                    This is from Server Components!`}
          />

          <MDXRemote source={targetPackage.description} />


The first one does have the h1, but the second one doesn't
I'm grabbing it from an api
Purple Martin
I assume your markdown content is stored in a database ?
Pacific herringOP
ah wait i already see it :facepalm:
Purple Martin
Oooh so the MD is already pre-parsed
I'm pretty sure you cannot mix html and MD
Pacific herringOP
fixed it
Purple Martin
Anytime pal