ヘッドレスCMSから受け取ったMDXをNext.jsコンポーネントに変換する - Breathnote

Next.jsのチュートリアルでは、マークダウンをパースする方法としてremarkを利用していますが、remarkだけではnext/imageコンポーネントやカスタムリンクを使用できません。 これを解決する方法としてMDXというマークダウンにJSXを埋め込む技術が存在します。 今回はこのMDXと、リモートから受け取ったMDXをJSXにパース出来るnext-mdx-remoteというライブラリを使って、ヘッドレスCMSから受け取ったマークダウンをJSXへ変換する仕組みを作ります。 今回の参考記事は以下の通りです。 Next.jsでCMSにMDX形式で登録したコンテンツを利用する ―next-mdx-remoteの使い方― MDX Remote Example 今回作るもの 機能を実装する前に、この機能を利用した際の、変換前のマークダウンと変換後のHTMLをそれぞれ載せておきます。 画像 <i