Jamstackな構成では、CMSにどのような形式でコンテンツを登録するかが関心になって来るかと思う。
Markdownを採用する場合は、remark-reactやremark-htmlを使ってMarkdownをHTMLに変換できる。
ただ、実際にはMarkdownだと機能的に足りない部分が出て来そうで、MDXという、MarkdownにJSX（Reactコンポーネント）を埋め込める形式を利用すると捗る。
しかしこのMDX、CMSのような外部コンテンツとして登録する場合はどう使えば良いんだ？と思ったら、Next.jsの場合、next-mdx-remoteという便利なライブラリがあった。
next-mdx-remoteの使い方
例として、Next.jsのImageコンポーネントを利用してみる。
# プロフィール画像 <Image src="/images/profile.jpg" width="100" height="100" />
CMSには上のようなMDX形式で保存して、
Reactコンポーネントでこのように変換して利用できる。renderToString、hydrateメソッドの第2引数にMDXで利用しているReactコンポーネントを渡すといい感じに変換してくれるようだ。
2021/05/25追記
Version 3ではrenderToString、hydrateメソッドではなくserializeメソッドを利用する方式に変わっている。
