Nextjsでsql.jsのwasmを綺麗にプロジェクトに追加する方法

ブラウザ上でSQLite3を使用したい場合はsql.jsというライブラリを使う事ができます。

sql.jsはSQLite3をwasmでビルドすることでブラウザ上で動くようにしたプロジェクトです。
そのため、SQLiteに互換性があり、データベースファイルを読み込む事もできます。

sql.jsを動かすにはwasmもロードする必要がある

sql.jsを動かすためにはwasmが必要になるため、フロントエンドエンドのプロジェクトをビルドする際にsql.jsのjsだけでなく、wasmの方もアクセスできるように追加してやる必要があります。

wasmファイルはインストールしたsql-jsのライブラリ内に存在します。

ls node_modules/sql.js/dist/sql-wasm.wasm                                               

React.jsではfile-loaderを使うことで下記のようにwasmをロードすることができます。

import sqlWasm from "!!file-loader?name=sql-wasm-[contenthash].wasm!sql.js/dist/sql-wasm.wasm";

const SQL = await initSqlJs({ locateFile: () => sqlWasm });

Next.jsでは難しい

NextjsはSSRやSSGなどビルドがReact.jsに比べて複雑なので、file-loaderでは上手くwasmを同梱させることができません。

一応、wasmファイルを手動でpublicディレクトリに移す事で動かす事もできますが、sql.jsのバージョンアップのたびに手動で管理するのは煩雑です。

Webpack5のasset/resourceを使えば解決できる

Webpack5ではasset/resourceというバンドルのための機能が標準で搭載されるようになりました。
この機能を使う事でNextjsでもsql.jsのwasmファイルをプロジェクトに追加することができます。

next.config.js経由でwebpackのコンフィグを設定します。

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer, webpack }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    config.module.rules.push({
      test: /\.wasm$/,
      type: 'asset/resource',
    })
    return config;
  },
}

module.exports = nextConfig

Next.js内のクライアントコンポーネントで下記のようにします。

const SQL = await initSqlJs({
    locateFile: () => (new URL("sql.js/dist/sql-wasm.wasm", import.meta.url)).toString(),
})

これでsql.jsをnext.jsのプロジェクトに追加して利用することができました。

今回の手法を使ったデモを用意してあります。