Import MDX in Plasmic/Next.js

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

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.

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:

  1. Point to my MD as my Dynamic Values source URL.
  2. Pipe part of the MD, into the MD component Mike used, and see MD on a page.
  3. Put any registered Button component say, below this MD on the page
  4. Pipe another part of the same MD into the MD component Mike and put that below the Button
    That correct?



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:

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

Try the “Raw” link on github

Try to use a Fetcher component and I see Error fetching data:
when pointing to :

Oh right, they probably prohibit cross origin requests

Also tried via my clone with same error. But can I then have cross origin requests?

Not sure what that is

I see, it’s CORS.
Can I just point to a local MD file to avoid this?

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:

1 Like

Thats looks great. But never used the “new server-side features in Plasmic” easy peasey?

Looking a tutorial now

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