Next.js で Require() of ES modules is not supported が出た時のメモ

Next.js v11で remark を使おうとしたら以下のエラー

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /path/to/the/project/node_modules/remark/index.js
require() of ES modules is not supported.
require() of /path/to/the/project/node_modules/remark/index.js from /path/to/the/project/.next/server/pages/posts/[id].js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /path/to/the/project/node_modules/remark/package.json.
  • next: 11.0.0
  • remark: 14.0.2
  • remark-html: 15.0.1

next のバージョンを11.1以上にすればOKらしいが、せっかくなので12まで上げることにした。Imageコンポーネントも最新のやつ使ってみたいし