Strapi Rich content text not showing correctly on Web Page

I am currently using Strapi as my CMS and NextJs/React as my frontend. I have included 1 field in my strapi as a rich content field. When I add my content in Strapi itself and see the preview, it shows the correct output with all the spacings and underlines etc. But when I switch to webpage view, it all comes as 1 sentence without any stylings. Places where I had made underlines show up as <u>Sentence</u> in my webpage.

Here is my current code:

export default function name({ posts }) {
  return (

      <Carousel />

// Tell nextjs how many pages are there
export async function getStaticPaths() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  const paths = => ({
    params: { id: },

  return {
    fallback: false,

// Get data for each individual page
export async function getStaticProps({ params }) {
  const { id } = params;

  const res = await fetch(`http://localhost:1337/blogs?id=${id}`);
  const data = await res.json();
  const posts = data[0];

  return {
    props: { posts },

Webpage Preview:

Getting the following error when I imported react-markdown

Hello there :slight_smile:
If you are using react markdown i would try this.
npm install react-markdown to install it

import ReactMarkdown from 'react-markdown'
<ReactMarkdown># Hello, *world*!</ReactMarkdown>

Where you would input your markdown / props inside of it more info here.

I think the reason it’s not showing correctly is because you are only rendering the text itself not the markdown.