全面的に MDX に移行しました

これまで MDX についていろいろと研究をしてきました。

• Okachi.js にて、MDX と Next.js について話しました
• next-mdx-frontmatter で Next.js の MDX 内にて Front Matter を使う
• modern site generator で Markdown 文書の一覧を作成するには
• Next.js で MDX の一覧ページを作る、その続き
• MDX 1.0 がリリースされていました

原一浩の UI カンソクスケッチ にて MDX の導入を行ってきたのですが、導入してみるとすこぶる使い勝手が良く、他のコーナーでも使おうと思うに至りました。

現状、記事コンテンツは ARTICLES があるのですが、ここは通常の Markdown で書いています。Next.js 上でどうやって Markdown で書いているかというと、いろいろなやり方があるとは思いますが、僕の場合は、Markdown をビルド時に JSON へと変換しています。

使っているツールは、Node.js 製のコマンドラインツールで、

• processmd

というツールです。

Node.js 製ツールなので、インストールも楽です。

$ npm i processmd

このツールの使い方は以下のような感じで、Markdown を探して、指定のディレクトリに Markdown ファイルをそれぞれ JSON ファイルに変換してくれます。このツールで生成された JSON は、front matter 形式で書かれたメタ情報も JSON に変換してくれるので、後ほど Next.js 上で読み込んだ時に取り回しがしやすいです。

$ processmd \"./contents/md/**/*.md\" --stdout --outputDir ./static/api > ./static/api/summary.json

加えて、このツールには Markdown の一覧をサマリーという形で書き出してくれるという機能があり、一覧ページを作成することも容易です。

MDX のことを知らなければ、そのまま Markdown 形式で進めたと思いますが、MDX を知ってしまったらもう戻れません。 ただ、今までの記事を全部 MDX に書き換えるのはなかなか大変でした。

Next.js で Markdown の記事を API 化したい方は processmd をぜひ使ってみてください。