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

    Configure Next.js to Use Markdown Inside of React

    John LindquistJohn Lindquist
    reactReact
    nextNext.js

    By default, Next.js can render React components as pages or parts of pages based on a url structure inside of a pages directory. Installing and configuring the mdx-js plugins for Next.js enables you to use Markdown as a React Component which renders out nicely inside your pages.

    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
    Transcript

    Transcript

    Instructor: 0:00 Install the necessary Next JS dependencies or Next React and React DOM. We can set up our scripts inside of our package JSON. I have a script block that dev script of just Next Build, a script of Next Build, and the start script of Next Start.

    0:19 We can create a new file in our pages directory called index.js and export a default function that renders out some JSX. We can run our dev script, which starts up Next and open up localhost:3000, which renders out this.

    0:36 I'll open a new terminal tab, and to add markdown support, we'll add @mdx-js/mdx which is the base package, and then the specific next package is zeit/next-mdx. With those installed, we can create a next.config.js. We'll require what we installed, so @zeit/next-mdx.

    1:01 I am going to call this withMDX and also invoke it with (), and then simply export it with the modules exports and invoke the withMDX which configures all the defaults of MDX for our project.

    1:17 With all that set up, now we can create a content.mdx file. I'll say my awesome page, and a header two of my amazing section, then some content my incredible content. In my index.js file, I can simply import content from, then the relative path content.mdx. Make sure to include the extension, then render out the content as JSX.

    1:45 Hit save and you can see my awesome page coming in from here, my amazing section, and my incredible content. Because this is an MDX file, I can also include JSX. Put in a div, a closing div, curly braces, and evaluate some JavaScript, so math random. Hit save, and you'll see a random number generated on our page.

    Discuss

    Discuss