今現在このブログは Gatsby + Markdown で構築されてます。しかし Gatsby はプラグインベタベタシステムで裏側がよくわからずいじりにくいというのが気になっていました。 気がつけば Next.js がもうかなりの存在感を示していて、ブログも Next.js という雰囲気を感じ、このサイトも脱 Gatsby にトライしてみました。

しかしそれが予想以上に難航して見事沈没したので、詰まりどころを記録としてまとめようと思った次第です。

コンパイルか ISR か

next.js で Markdown / MDX を扱うには、 JSX/TSX と同様に事前に JS へコンパイルする方式 (コンパイル方式) と、 サーバーサイドで HTML に変換してキャッシュする方式 (ISR) があります。

コンパイル方式は、 @next/mdx を next.config.js に仕込みます。 レイアウトを定義したり frontmatter を取り除いたりするために remarkPlugins の実装を用意する必要があります。

このあたりが非常にややこしいです。 バージョン11現在の　Next.js　は next.config.js を TypeScript にすることはできず (Next.js の仕組みの外で .ts を事前コンパイルすればできなくはないですが)、 文字列で JSX をいじる必要があったりと中々狂気です。ちゃうねんワイはブログを書きたいだけなんじゃ。

一方の ISR 方式はというと、リクエストを一旦普通の TypeScript のコードで受けて、対応する Markdown を ファイルシステムからその場で読み取って JSX エレメントに変換して返すという形になります。 Next.js + Vercel ならこれでも CDN を効かせられるので負荷の心配も基本的にはなさそうです。 JSX エレメントに変換するには複数選択肢があります。 next-mdx-remote 、 react-markdown 、 remark/remark-html といったものがあります。 このうち remark/remark-html は TypeScript で利用しようとするとうまくいきませんでした。

コンパイルの茨っぷりに比べると ISR を使っておくのが無難そうでした。

MDX の取り回し難易度の高さ

Markdown から TSX で定義したエレメントを import する記事が実は2つほどありますが、これの扱いに困っています。 ISR 方式だと、実行時に MDX を読み込んだ時に TSX を動的に import することが困難です。

Next.js だと諦めて記事をまるごと TSX で実装するのがよいのかもしれません。

Markdown の癖と画像の扱い

Gatsby では生 HTML タグを組んだ時に Markdown が謎のコンパイル失敗になることがありました。 Next.js 化するにあたって ISR 方式の各ライブラリを確認しましたが、やはり生 HTML タグまわりでよくわからない挙動をしてくれやがるようです。

更に言うと Next.js では <Image> や <Link> も使っていきたくなるんですが、このあたりどうするんでしょうね。

記事概要の生成

このあたりも gatsby なら意識せずによろしくやってくれるところです。 gray-matter で frontmatter を切り離すのと一緒に概要 (excerpt) を生成する機能が付いてるんですが、どうもこれも生 HTML タグがらみがうまく動かない模様。

今後の作戦

だいたいこんなとこで疲れちゃったので一旦作業先送りにして、次のきゃすけ向けの作業に集中しようと思った次第です。 色々コードいじったけどこれが成果物にならないのはとてもつらい。

細かいコンポーネントから gatsby 依存を取り除くことなら早々に成果になるかという感じ。