Rendering MDX In JSX
Answered
French Lop posted this in #help-forum
French LopOP
I'm confused about MDX, what if I want to import local MDX and render from within JSX? Should I use [remote MDX](https://nextjs.org/docs/app/building-your-application/configuring/mdx#remote-mdx) like in the documentation, although I'm not really fetching it from remote? Should I use [react markdown](https://github.com/remarkjs/react-markdown)? What is remote MDX using under the hook, does Next.js have its own Markdown renderer?
Answered by joulev
react-markdown, next-mdx-remote are the same thing, (mdxString) => ReactComponent. it doesn't know anything about your project and if you want it to render custom components you need to tell it manually. they are for when you need to serve content dynamically (e.g., given a slug, you fetch the mdx content and convert it to jsx using those packages).withMDX is different in the sense that it is a webpack plugin, so it is used when you need to parse mdx file in a bundler level to make them equivalent to .js files. so when you want to move with page.mdx files, or when you want to import mdx files like javascript files, go with this option.i have never used the content collection thing.
17 Replies
French LopOP
i just tested with remote MDX, it doest respect my macros defined in the next config
@French Lop I'm confused about MDX, what if I want to import local MDX and render from within JSX? Should I use [remote MDX](https://nextjs.org/docs/app/building-your-application/configuring/mdx#remote-mdx) like in the documentation, although I'm not really fetching it from remote? Should I use [react markdown](https://github.com/remarkjs/react-markdown)? What is remote MDX using under the hook, does Next.js have its own Markdown renderer?
import local mdx as in just like this?
then you just follow the set up steps there and it should just work
import Component from "./file.mdx"then you just follow the set up steps there and it should just work
@joulev import local mdx as in just like this?
tsx
import Component from "./file.mdx"
then you just follow the set up steps there and it should just work
French LopOP
yes, it did work, but without my config. i assume
remote MDX has nothing to do with withMDX?@French Lop yes, it did work, but without my config. i assume `remote MDX` has nothing to do with `withMDX`?
remote mdx is not related to the withMDX at all
it's basically a diy withMDX so you need to set up manually
French LopOP
ok so the documentation says nothing about plugins for remote mdx?
im just confused because there are so many markdown renderers, like
react-markdown or content-collections/markdown and i just like to know which one to choose@French Lop ok so the documentation says nothing about plugins for remote mdx?
next-remote-mdx is just a (mdxString) => ReactComponent function no more no less. it is not integrated with webpack like withMDX and is meant for, well, remote mdx that's not available in the local file system.
if you want custom components you need to specify it manually for next-remote-mdx to know. check section "Custom components from MDXProvider" in the next-remote-mdx documentation https://github.com/hashicorp/next-mdx-remote
if you want custom components you need to specify it manually for next-remote-mdx to know. check section "Custom components from MDXProvider" in the next-remote-mdx documentation https://github.com/hashicorp/next-mdx-remote
French LopOP
thank you!
i have a site currently in astro and was thinking about switching to next.js
there i find it nice to not have the hard choice between a full markdown page or full jsx page but combine the two still with central config
thats all but i guess there are workarounds for next.js
[content-collection](https://www.content-collections.dev/docs/content/markdown) looks good
react-markdown, next-mdx-remote are the same thing, (mdxString) => ReactComponent. it doesn't know anything about your project and if you want it to render custom components you need to tell it manually. they are for when you need to serve content dynamically (e.g., given a slug, you fetch the mdx content and convert it to jsx using those packages).withMDX is different in the sense that it is a webpack plugin, so it is used when you need to parse mdx file in a bundler level to make them equivalent to .js files. so when you want to move with page.mdx files, or when you want to import mdx files like javascript files, go with this option.i have never used the content collection thing.
Answer
French LopOP
thanks a lot for your input
/solved