Install and Use React Markdown in a Next.js Application
For writing out the blog posts, it was done in markdown. Next.js doesn't automatically render markdown how we want it so we are going to install and use the package react-markdown.
In our [slug].js file, we import ReactMarkdown and replace the p tag for our body, where we are rendering the markdown, with <ReactMarkdown>.
The last thing we want to do is have it render pictures. Unfortunately, React Markdown doesn't automatically render images so we are going to setup Cloudinary in the next lesson.
Instructor: [0:00] Now that we've got our dynamic page working with the posts from Strapi, we want to be able to render the markdown that we enter in Strapi. Here, if you check our text, we still have the hash signs and the lists not rendered in the right way. To do this, we need to install something called react-markdown. [0:26] I'll go into my terminal, stop the server and type npm i react-markdown. Great. Now that it's been installed, we start our project with yarn dev and open up VSCode. We'll open up our slug.js file and at the top, we'll import ReactMarkdown from react-markdown. Then at the bottom here, where we actually display our body, we want to replace this with markdown. Then edit the closing tag as well.
[1:25] Now we need to change this to actually display and so we'll use tilde. Then bring in posts. Close that. Now you can see that our ingredients is in h2, and we have our list showing up.
[1:52] Let's go back into Strapi. I'll just extend this. Before we do this, let's fix the styling of this. The color currently isn't the best. We'll make this black and so it's more visible. Perfect. Back to full screen.
[2:13] Now, let's go into Strapi. I'll Strapi backend in our content manager. Click Exactly What You Need. Then let's add an image right above ingredients. We'll add asset and browse and click room. Add a random image. We'll upload this and add it to our file. Then we get our image there. Click save and go back here. We'll go back home, refresh.
[2:40] When we click exactly what you need, the first post, we see a room that PNG our images and then getting displayed.
[2:47] However, Reacts markdown is working and that is how you install React Markdown, turn the Markdown.