Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Import Markdown Files into Other Markdown Files as React Components with Next.js

    John LindquistJohn Lindquist
    reactReact
    nextNext.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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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?"

    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.

    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.