現在、私はNext.jsでブログシステムを開発しているのですが、記事の中に挿入するコンポーネントとdangerouslySetInnerHTMLの課題に悩まされていました。 正規表現を使用して、記事の文字列をコンポーネントとそれ以外のHTMLに分割していたのですが、dangerouslySetInnerHTMLは、閉じタグまで含める必要があるため、以下のように要素の中にコンポーネントを配置している場合、分割できません。どのように処理すれば良いのか私には思いつきませんでした。

<div class="border p-4">
  <MyComponent />
</div>

また、コンポーネントの数だけ、記事の文字列から抽出するためのコードを書く必要があるのも煩わしく感じていました。それらの悩みがライブラリ『next-mdx-remote』で全て解決しました。

MDXの導入方法

以下の記事をご覧ください。

next-mdx-remoteの導入方法

next-mdx-remoteの導入方法は、公式ドキュメントを見ればすぐにわかるので、説明するまでもありませんが、コードを載せておきます。

公式ドキュメント

hashicorp/next-mdx-remote: Load MDX content from anywhere

インストール

npm i next-mdx-remote

ソースコード

import React from "react";
import { MDXRemote } from "next-mdx-remote/rsc";

// Components
import Link from "next/link";
import Image from "next/image";
import Snippet from "@/components/snippet";
import LinkCard from "@/components/link-card";
import CodeBlock from "@/components/code-block";

const components = { Link, Image, Snippet, LinkCard, CodeBlock };

const BlogContent = ({
  content,
}: {
  content: string,
}) => {
  return (
      <MDXRemote
          source={content}
          components={components}
      />
  );
}

export default BlogContent;

おわりに

MDXめちゃめちゃ楽！！