Import MDX in Plasmic/Next.js

political_magpie · April 30, 2023, 5:19am

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.

yang · 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

political_magpie · May 2, 2023, 3:50am

So this sounds like I can:

Point to my MD as my Dynamic Values source URL.
Pipe 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
Pipe another part of the same MD into the MD component Mike and put that below the Button
That correct?

yang · May 2, 2023, 4:01am

Yeah

political_magpie · May 2, 2023, 4:09am

WOW! OK.

political_magpie · May 2, 2023, 4:10am

Basically I get the equivalent of MDX - nice!

political_magpie · May 2, 2023, 9:15am

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:
https://github.com/LincAtMerkle/chakra-ui-docs/blob/main/content/docs/components/button/usage.md

yang · 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

yang · May 2, 2023, 6:12pm

Try the “Raw” link on github

political_magpie · May 2, 2023, 10:00pm

Try to use a Fetcher component and I see Error fetching data:
when pointing to :https://raw.githubusercontent.com/chakra-ui/chakra-ui-docs/main/content/docs/components/button/usage.mdx

yang · May 2, 2023, 10:01pm

Oh right, they probably prohibit cross origin requests

political_magpie · May 2, 2023, 10:03pm

Also tried via my clone with same error. But can I then have cross origin requests?
https://raw.githubusercontent.com/LincAtMerkle/chakra-ui-docs/main/content/docs/components/button/usage.md

political_magpie · May 2, 2023, 10:03pm

Not sure what that is

political_magpie · May 2, 2023, 10:06pm

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

yang · 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: