Import Markdown Files into Other Markdown Files as React Components with Next.js
Markdown files tend to get really long as you begin authoring them and sometimes separating into pages just isn't enough. mdx-js enables you to import Markdown files then render them inside of other Markdown files as JSX so you can easily separate files into sections and keep everything organized.
Instructor: [00:00] I have a page in my index.md file in my pages directory. I am going to create a section. I am going to create a directory called sections and a file called intro.md with an h2 welcome and some content like, "Isn't discreet?"
[00:17] What I can do now is go back into my pages in my index.md. I can import intro from the relative path as upper directory into my sections. You could name sections whatever you want or this directory whatever you want, and /intro.md.
[00:36] A quick tip here is since this is not valid md, if you install the MDX extension in VS code, I can change the language mode to MDX. Now, this will look much nicer, then I destroy the JSX of intro. Close that all. Hit save, and you'll see I have an index.md, which is importing this intro.md into itself and rendering up.