Name: Configure Next.js to Use Markdown Inside of React
Uploaded: 2018-08-14T16:37:33-05:00
Description: 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.

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.

https://app.egghead.io/api/v1/lessons/react-configure-next-js-to-use-markdown-inside-of-react/subtitles

Configure Next.js to Use Markdown Inside of React

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.

Configure Next.js to Use Markdown Inside of React

Share this video with your friends