Render Markdown With next-mdx-remote in our Next.js Page Component
Once we have separated the front-matter from the rest of the markdown document, we can proceed to convert it to HTML, for then finally render it with our Next.js page component. In this lesson we use next-mdx-remote to parse the markdown string into HTML and we learn how to leverage the MDXRemote component to include it into our page component.
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] The first step is done. We are able now to read the front matter. We passed it on to our Page component, and we render it accordingly in the Page component itself. In fact, if you visualize our website here, we see the title and author being rendered.
[0:15] The next step is to actually render the content, so the Markdown content. For that purpose, we need to first convert it to HTML. We know that this article Markdown content here contains the front matter, as well as the content. The first step will be to pass that ahead to our renderMarkdown function.
[0:32] Let's jump into that and customize it. This now takes the Markdown content. In order to render the actual Markdown, we will again use a library. Let's install here, next-mdx-remote, as our Markdown parsing library, which will allow us to convert it to HTML.
[0:51] The next-mdx-remote has a function called serialize, which is exported from the next-mdx-remote/serialize. This function is quite easy, because it allows us to simply invoke that serialize, pass the Markdown content. We might want maybe to safeguard this in case for some reason Markdown content is not defined with passing an empty string. Then we return everything back to the caller.
[1:15] Since this is an async operation, this would be a promise of type string. Let's remove this for now, and let type string for the type. Now the implementation is done. We can go back again to our Page component.
[1:27] We have already invoked here the random/Markdown, so we already get the rendered HTML back here. We can just go down here and click through the HTML which would be our rendered HTML. As a result, our component now gets the front matter and HTML. We can now render this into our component.
[1:46] For that purpose, the next-mdx-remote also has a component exposed, which is the MDXRemote component, which is export from the next-mdx-remote. Once we have time, we can go down here just below our article, maybe including HR tag in-between. Then we use the MDXRemote where we can directly pass the HTML and render that to our page.
[2:12] Again, let's start our server. If you go to 4200, refresh. We actually get here an error, and it looks like we return a promise somewhere, which we don't await I guess. In fact, the render Markdown is a promise, so we need to await that.
[2:29] The getStaticProps is already marked as an async function, so we're good there. We can just save and refresh again. Finally, we see our content being rendered. We see the title, the author, as well as the HTML that is being rendered out on the page.