microCMSのリッチエディタ（生HTML）をReactのコンポーネントにパースしてみた

概要microCMS ではブログなどの記事データをリッチエディタで入稿することが可能です。ただ、APIではそれらが生HTMLで返ってきます。 dangerouslySetInnerHTML に渡せばレンダリングされますが、以下のようなケースもあると思います。 Chakra UI などの定義されているコンポーネントを利用したいclass指定してグローバルCSSを書きたくないXSSの危険性があるからdangerouslySetInnerHTMLを利用したくない 今回はこれらを解決するhtml-react-parserを利用していきます。サンプルコードはこちら。microCMSの取得処理は省略しています。 実行環境サンプルとして、Next.js と Chakra UI を利用します。 html-react-parserとはhtml-react-parser はReactで生HTMLを自由に加工す