Next.jsのアップデートによってKonvaのセッティングがちょっっっっっと面倒になってた。

2023/11/30（木）追記

この内容では、npm run buildでエラーが起きました。詳しくは、「npm run buildを通す方の設定！！！」にて！

はじめに

進化が凄まじいですね。Next.js。AppRouterなどまだ真価は引き出せていませんが、頑張って進歩に追従しています。

さて、Webで図形を動かしたい・生成したいというとき、皆様何を使うでしょうか？p5.js？バニラjsでcanvasをゴリゴリに？
もっっっとReact系を使っている恩恵を感じたくないですか？

そこで！私はKonvaを推します。DOMのReact感を残しつつ、多レイヤー描画もできる、機能面と雰囲気面の両方とも好きなパッケージです。

環境と時期

• 2023/11/29（追記11/30）

• node v20.10.0(LTS)

• npm 10.2.4

• next.js 14.0.3

• konva ^9.2.3

2022年までのお話

ただ、コンポーネントを呼び出すのは少し面倒で、いくつか追記する必要があります。

その内容はNext.js + react-konvaを使ってみたという１つの記事に集約されています。リンク先記事に完璧に書かれているので、具体的なコードは省きますが、以下の手順を踏みます。

1. Konvaのパッケージを使ったコンポーネントを作る。（描画コンポーネント）

2. 描画コンポーネントを読み込むコンポーネントで、dynamicを使った読み込み方をする。

最初できないときは焦りますが、これさえやれば、かなり良い開発体験ができるので、ここだけは！面倒くさがらないでください…！

2023年から（AppRouter以降）のお話

Konvaを潰す気か？としか思えないような、謎すぎる事象に襲われます。

「'canvas'なんてよくわからないよ」というエラー。分かってくれ。

「Can't resolve 'canvas'」、canvasが使えない。と。
正直、AppRouterになって終わってしまったと、そう思いました。ジョークアプリを作るつもりだったので、もう諦めようと。ただ、やるべき手順だけは一旦踏んでおくべきと考え、「Konva Can't resolve 'canvas'」と調べました。すると…

あったのです！！！解決策が！！！しかもGitHubのissueに！！

場所が100点過ぎます。どこかの質問掲示板、yahoo知恵袋よりもよっっぽどissueの議論のほうが正確です。

next.config.jsを次のように書き換えることでOKになります。

const nextConfig = {
  ...
  webpack: (config) => {
    config.externals = {
      canvas: "canvas",
    };
    return config;
  },
};

これだけで、コンパイルは通り、画面は表示されます！

コンパイル通過！！

画面

npm run buildを通す方の設定！！！

公開しようとbuildコマンドを実行したら、エラーが出ました！！！
今度はcan't resolve crittersと。しかし、またまたGithubのissueで解決されていました。回答部分はこちら！

ここから、buildとdevに関係なかった部分を除いた結果、next.config.jsをこの構成でbuildもdevも通ることが判明しました。

// next.config.js
const nextConfig = {
...
    experimental:{
        esmExternals: "loose", // required to make Konva & react-konva work
    },
    webpack:(config) => {
        config.externals = [...config.externals,{canvas:"canvas"}]; // required to make Konva & react-konva work
        return config;
    },
...
};

まとめ

Konvaを読み込む前には、

1. next.config.jsに加筆

2. dynamicで読み込む設定

を忘れていないか、チェックしましょう！！
よき図形描画ライフを！！！