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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!