nicecore
commented
1 year ago Next.js can query Hygraph for several different formats of the content from the rich text field:
When you save content, it is saved as an abstract syntax tree (AST), and can be queried in the format of HTML, Markdown, Text, and the "raw" AST itself (JSON). The AST is based on Slate.
Rendering the HTML of your rich text is quite simple, but comes without much customization. Hygraph will automatically parse the Slate raw output into HTML elements you can pass straight to the DOM...If you are using React, it's a little different. However, you can safely (because you know the source of truth) use dangerouslySetInnerHTML for setting HTML.
I was previously using Markdown and it rendered on the front end looking just fine because there was no special formatting or anything really. But next they talk about Markdown renderers. That is what I'll probably implement ultimately so as to avoid using something called "dangerously set inner HTML," even if there's no risk really (Hygraph's language suggests there's no risk).
The React docs explain how to "dangerously set inner HTML" here.
Another Vercel document on Rich Text that might be helpful.
React rich text renderer from Hygraph: https://hygraph.com/blog/hygraph-react-rich-text-renderer
This is going to be tricky because it has to do with the document Hygraph is creating, the representation of
reviewBodyHygraph is sending to the Next.js app, and then how it's being rendered. Need to do some real homework to make this work.