Next.jsでMarkdownからページを生成する方法

[eteeeeeerminal]

自己紹介ページなどを、Markdownから生成したい。
やり方をざっくり調べて、メモしておく。

[eteeeeeerminal]

参考になりそうな記事を見つけた。

• Next.js のための Remark / Rehype 入門

Remarkを使うといいらしい。Markdownパーサ？みたいなやつ。たくさんプラグインがあって、適宜プラグインを入れて使うらしい。

markdownからhtmlを生成するには主に以下の２つ

1. remark+rehype
2. remark+remark-html

next.jsのblog-starterは、remark+remark-htmlを使っている
blog-starter

一方で、remark-htmlはrehypeをラップしていて、rehypeを直接使ったほうができることが多いみたいなことも書いている。

↓ readmeより引用 https://github.com/remarkjs/remark-html#remark-html ↓

⚠️ This package essentially packs remark-rehype and rehype-stringify, and although it does support some customisation, it isn’t very pluggable. It’s probably smarter to use remark-rehype directly and benefit from the rehype ecosystem.

[eteeeeeerminal]

next-transpile-modules を使うと、よしなにトランスパイルしてエラーが出なくなるらしいのでやった。
https://zenn.dev/tomon9086/scraps/3a1d9d3eed4864#comment-4729aa5b084adc

ただこれやっても、また別のモジュールで同様のエラーが出て、rehypeの裏にあるライブラリ全部書かないといけなくなりそう。キツイ。

[eteeeeeerminal]

公式のstarterが、remark+remark-htmlで動いているので、そちらも試してみる。
同じエラーで落ちました。
まあ、内部でrehype使ってるしなー。

じゃあ、なんで公式のstarterは動いたんじゃ？

[eteeeeeerminal]

remarkとremark-htmlを13.0.0にダウングレードしたら、動きました。

[eteeeeeerminal]

rehypeのパターンでもダウングレードしたら動く可能性が出てきました。

[eteeeeeerminal]

他の方法も検討して、無理ならダウングレードしたremarkを暫定で採用します。

[eteeeeeerminal]

react-markdownを使ってみる。(reactってついてるし、同じreact系列のnextでも動くじゃろ)
https://github.com/remarkjs/react-markdown

一応nextと組み合わせて動作させてる人いるみたいだし。
https://zenn.dev/asazutaiga/articles/be2a8a5f428a38

[eteeeeeerminal]

react-markdownでも、ERR_REQUIRE_ESMのエラーが出た。

[eteeeeeerminal]

エラーが出たパッケージを片っ端から、next-transpile-moduleに突っ込んでいったらなんとか動いた。

remark直より、react-markdownの方が、dangerouslySetInnerHTMLがラップされている分安全らしい。

[eteeeeeerminal]

ERR_REQUIRE_ESM関連で追加の情報

https://nextjs.org/blog/next-11-1#es-modules-support

vercel/next.js#27876

試験的に設定を変更してエラーを回避できる説を発見

[eteeeeeerminal]

exportsに{experimental: {esmExternals: true}}を追加して、package.jsonに"type": "module"を追加しても、変わらずエラーになる。

Error [ERR_REQUIRE_ESM]: require() of ES Module /mnt/d/Github/vpn/vpn-website/next.config.js from /mnt/d/Github/vpn/vpn-website/node_modules/next/dist/next-server/server/config.js not supported.
next.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename next.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /mnt/d/Github/vpn/vpn-website/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at loadConfig (/mnt/d/Github/vpn/vpn-website/node_modules/next/dist/next-server/server/config.js:8:72)
    at async NextServer.loadConfig (/mnt/d/Github/vpn/vpn-website/node_modules/next/dist/server/next.js:1:3155)
    at async NextServer.prepare (/mnt/d/Github/vpn/vpn-website/node_modules/next/dist/server/next.js:1:2679)
    at async /mnt/d/Github/vpn/vpn-website/node_modules/next/dist/cli/next-dev.js:22:1 {
  code: 'ERR_REQUIRE_ESM'
}

[eteeeeeerminal]

結局Discussionsも立てられて1ヶ月経ってないし、まだまだ修正待ちかなあ。

[eteeeeeerminal]

とりあえず、react-markdown+next-transpile-moduleで決定とします。