現在、私は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めちゃめちゃ楽！！