Configure Next.js to Use Markdown Inside of React

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

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.

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.

egghead
egghead
~ 10 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today