How to display formatting done for text from Strapi's WYSIWYG to NextJS's UI?

Question

I am new to Next JS and Strapi CMS.

I am trying to pass styling from Strapi's backend admin panel to NextJS UI.

How can we display the formatted text passed from WYSIWYG editor in Strapi to a frontend in Next JS?

Currently, if I publish this text from Strapi admin panel as a JSON object via its API to frontend, it wont display Welcome tag as H1 Tag, a bold text, a bullet point or a piece of code.

Would appreciate any help.

Answer 1

You'll need to use some kind of Mardown processor to convert Markdown to HTML.

import remark from 'remark'
import html from 'remark-html'

export default async function markdownToHtml(markdown) {
  const result = await remark().use(html).process(markdown)
  return result.toString()
}

markdownToHtml('## Hello world!'); // => <h2>Hello world!</h2>

This example showcases Next.js's Static Generation feature using Strapi as the data source.