I’m hoping to import and render mdx files in Plasmic (Nextjs).
This youtube tutorial shows how to get MD although you limited to MD and pasting content via a prop. But as I’m using Nextjs, this looked promising https://nextjs.org/docs/advanced-features/using-mdx
Alternatively I could convert the MDX or import it to a CMS or use
ContentLayer, as it would be much better to allow an author to edit the content and replace/add registered code components (ChakraUI React).
Any pointers appreciated.
May 2, 2023, 1:45am
The MD support built into Next.js is build-time only, so you can’t use it to dynamically render some markdown
You can indeed use the component shown in Mike’s tutorial video plus dynamic values to pipe markdown from any data source into the component
So this sounds like I can:
Point to my MD as my Dynamic Values source URL.
part of the MD, into the MD component Mike used, and see MD on a page. Put any registered Button component say, below this MD on the page
another part of the same MD into the MD component Mike and put that below the Button
Basically I get the equivalent of MDX - nice!
So a stupid question…
How do I point to a MD file in the URL Dynamic Values, doesn’t it have to to a Json file or an api source?
The file is:
May 2, 2023, 6:11pm
You have to paste the markdown into the editor, or you can try to use a Fetcher component - the Markdown component doesn’t fetch anything by itself
And you have to use a URL that gets markdown, the above URL gets a github page
May 2, 2023, 6:12pm
Try the “Raw” link on github
May 2, 2023, 10:01pm
Oh right, they probably prohibit cross origin requests
I see, it’s CORS.
Can I just point to a local MD file to avoid this?
May 2, 2023, 10:08pm
The problem is that the fetch is being made directly from your browser, and that’s prohibited by browsers. You can actually use our new server-side features in Plasmic, like the server-side HTTP queries:
Thats looks great. But never used the “new server-side features in Plasmic” easy peasey?
OK I’m almost there.
But my URL appends with “/ api/example” which throws an error:
May its an issue on this screen
Got it - thx. It just needed the base URL