Strapi Rich text content not showing correctly on Web Page

Question

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 (
    <>
      <div>
        <div>
          {posts.Title}
        </div>
      </div>
      <div>
        {posts.Content}
      </div>

      <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 = posts.map((blog) => ({
    params: { id: blog.id.toString() },
  }));

  return {
    paths,
    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 import react-markdown

Answer 1

This is because you have to convert the markdown into HTML. You can find an example in this tutorial: https://strapi.io/blog/build-a-blog-with-next-react-js-strapi

First, install "react-markdown":

npm install react-markdown
# or
yarn add react-markdown

The code below should work:

import ReactMarkdown from "react-markdown";
// ...

export default function name({ posts }) {
  return (
    <>
      <div>
        <div>
          {posts.Title}
        </div>
      </div>
      <div>
          <ReactMarkdown source={posts.Content} escapeHtml={false} />
      </div>

      <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 = posts.map((blog) => ({
    params: { id: blog.id.toString() },
  }));

  return {
    paths,
    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 },
  };
}

By the way, to retrieve only one entry in Strapi, you should use the single entry API endpoint: https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/content-api.html#get-an-entry

Answer 2

The syntax for react-markdown has changed a little since the Pierre's answer. Here's current one for someone looking for an answer for the same question.

<ReactMarkdown>Your content</ReactMarkdown>

Link for source: https://github.com/remarkjs/react-markdown