Next.js 14でcanvasを使おうとしてハマったこと

Next.js 14でFabric.jsを使おうとした際に、いくつかの問題に直面しました。この記事では、その問題と解決方法について共有します。

問題の概要
Fabric.jsは、ブラウザ上で動作する強力なHTML5キャンバスライブラリです。しかし、Next.js 14でFabric.jsを使用しようとすると、エラーが発生しました。

エラーは、Fabric.jsが内部で使用しているいくつかのネイティブモジュールが原因で発生します。これらのモジュールは、Node.js環境でのみ動作するため、Next.jsのサーバーサイドレンダリング（SSR）環境では問題が発生します。

解決方法
この問題を解決するためには、Next.jsのWebpack設定をカスタマイズして、これらのモジュールを外部化する必要があります。具体的には、next.config.jsファイルに以下の設定を追加します。

next.config.js

// next.config.js
module.exports = {
  webpack: (config) => {
    config.externals.push({
      'utf-8-validate': 'commonjs utf-8-validate',
      bufferutil: 'commonjs bufferutil',
      canvas: 'commonjs canvas',
    });
    return config;
  },
};

この設定により、utf-8-validate、bufferutil、およびcanvasモジュールがWebpackバンドルに含まれず、実行時に外部から提供されるようになります。これにより、Next.jsのSSR環境でFabric.jsを正常に動作させることができます。

まとめ
Next.js 14でFabric.jsを使用する際に直面した問題とその解決方法について説明しました。next.config.jsファイルに適切なWebpack設定を追加することで、これらの問題を回避することができます。Fabric.jsを使用している他のプロジェクトでも同様の問題が発生する可能性があるため、同じ方法で解決できるでしょう。

これで、Next.js 14とFabric.jsを組み合わせて、強力なキャンバスアプリケーションを構築する準備が整いました。Happy coding!