Does it make sense to use MDX to add small dynamic content? If so, how?
Answered
Tomistoma posted this in #help-forum
TomistomaOP
Hi there! I'm trying to find how can I use MDX in Next.js 13 to add small dynamic content, but I can only find how to add MDX as whole pages. Furthermore, I feel that MDX might be too much for what I'm trying to do. Basically, I'm doing a glossary and some items have definitions which use other items. When this happen, I'd like to add a hover card with the explanation. So, does any one know how I could do this or how can I use MDX for this and could share here, please? Thanks!
Answered by Asian black bear
basically, if you do this: https://nextjs.org/docs/app/building-your-application/configuring/mdx
22 Replies
TomistomaOP
I don't know if it's important or not, but I'm using this Accordion component https://ui.shadcn.com/docs/components/accordion for each glossary item (the title is the trigger and the meaning is the content)
I'd like to use this hover card if possible https://ui.shadcn.com/docs/components/hover-card
I think it should be possible with MDX, but if not that's ok. I could try to use :hover::after or something like that to implement a hover content
I think dangerouslySetInnerHTML is not a good practice to use anymore, but I don't know. I'm still learning.
This might be an use case for dangerouslySetInnerHTML.
Asian black bear
I don't think you need to use
dangerouslySetInnerHTML, it should work with the inbuilt MDX support of Nextare you using
/app router?Asian black bear
basically, if you do this: https://nextjs.org/docs/app/building-your-application/configuring/mdx
Answer
Asian black bear
You can import MDX files as if there were React components, and jam them directly into your accordion elements 🙂
TomistomaOP
Thanks for your answer!!
@Asian black bear I don't think you need to use `dangerouslySetInnerHTML`, it should work with the inbuilt MDX support of Next
TomistomaOP
What do you mean inbuilt exactly? I won't need to do
npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx then?@Asian black bear are you using `/app` router?
TomistomaOP
Yeah, I'm using
/app router@Asian black bear basically, if you do this: https://nextjs.org/docs/app/building-your-application/configuring/mdx
TomistomaOP
I read this, but I thought it only worked if I used MDX files as pages, not as components. I might have misread. I'll read it again.
@Asian black bear You can import MDX files as if there were React components, and jam them directly into your accordion elements 🙂
TomistomaOP
That's great, that's what I need, thank you very much!
Asian black bear
In the pages dir they had to be pages, but in the app dir I think it is impossible for them to be!
@Asian black bear In the pages dir they had to be pages, but in the app dir I think it is impossible for them to be!
TomistomaOP
Oh, I see, thanks for the clarification!
Asian black bear
Let me know how it goes, we are learning together 🙂
TomistomaOP
Sure thing! 
Golden-winged Warbler
yeah, they act more like components. I import MDX and use them like repeated sections on different pages. Think of something like a CTA or code example you want in multiple places.
This makes them way more useful, and if you want it as a page, just make the imported MDX the primary content component
You can still turn a directory of MDX files into a set of routes, just needs a slug and a touch of code. You can even generate a nice content tree / menu by using metadata
TomistomaOP
It's true, I've managed to use them as components. Thanks, both of you!