ReactでコンポーネントからMarkDown ファイルを呼び出す

概要

marked - npmを使用してNext.jsのプロジェクトから.mdファイルを試しに呼び出してみたことの備忘録です。
markedのバージョンは "marked": "^10.0.0",です。
公式ではdemoページを見ることができます（左がmdファイルで右が出力されるHTML）。

手順

まずはプロジェクトにインストールします。

npm i marked

プロジェクトから読み込める場所に.mdファイルを用意します。

次に、コンポーネントから以下のように呼び出します。

import fs from 'fs'
import path from 'path'
import { marked } from 'marked'
import DOMPurify from 'dompurify'

const markdown = fs.readFileSync(filePath, 'utf8') // .mdファイルの読み込み
const content = marked(markdown) // markedに渡すとstringが返ってきます

const cleanContent = DOMPurify.sanitize(content)
  return (
    <div className='course-container p-8'>
      {/* HTMLコンテンツを安全にレンダリングする */}
      <div dangerouslySetInnerHTML={{ __html: cleanContent }} />
    </div>
  )

DOMPurifyはDOMを安全にsanitizeしてくれるライブラリで、必須ではありません。markedの返り値をそのまま使うこともできます。
ただmdファイルから生成されたコンテンツにXSS攻撃などの脆弱性があった時にsanitizeしてくれるので、外部ファイルなどからDOMを生成するときに覚えておくと良いと思います。