Dynamic Routes with either *component importing* or shortcode imports via MDXProvider, nextJS

[minijoo]

AT A HIGH LEVEL, I want to allow the use of a <MyGallery /> component in my blog posts which are rendered via dynamic routing/[slug]. I looked at MDX to solve this problem.

• If I give up dynamic routing, it is very straightforward. In some hello.tsx page file, I can add an import and a render of the mdx file, like so:

// hello.tsx
import Blog1 from '../_posts/blog1.mdx' // IMPORT
export default function Hello(/*...*/) {
  return <Blog1 /> // RENDER
}

• If I maintain dynamic routing, I need to find a way to compile and run the mdx blog file from a string. I followed the instructions on mdxjs.com and modified hello.tsx to read dynamically the blog contents from a file instead of importing it. When done this way, the import line in the mdx blog file import MyGallery from "../components/myGallery" throws an error saying:

• From there, to keep dynamic routing possible, since the above method did not work, I looked for ways to not have the import MyGallery line in the mdx blog and instead use shortcodes to preload the custom mdx components globally. For this I followed the instructions on Gatsbyjs.com (which is admittedly not the framework I'm using) to use the services of MDXProvider and its components property to allow for the use of aMyGallery component in the mdx blog. With everything seemingly set up as per instructions, I receive this error:

I've seen multiple examples of MDX being used in the NextJS framework but none of them are exactly what I am trying to achieve. Is there any tweaks anyone can think of to the above three scenarios that will get my hopes and dreams to come true? I've now used 3 different MDX compilers to no avail. All I want is to put photo galleries in my blogs 😭😭😭😭😭😭😭

Thank you in advance.

[wooorm]

• dynamic routing and splitting the work between server/client are two different things. Your original problem does not require your follow up solution
• Failed to fetch ... -> then pass your component: https://mdxjs.com/docs/using-mdx/#components. MDX allows you to pass components. Or you serve components on your server.
• “shortcodes” not sure where you get this word for but MDX is a lot like JS(X), where components is more common?
• “Gatsbyjs.com (which is admittedly not the framework I'm using)” please don’t, it’s unmaintained, has old docs, and is not what you are using. We have docs! read our docs!
• “none of them are exactly what I am trying to achieve” then please explain what you want to do