https://zenn.dev/razokulover/articles/fb64150be7a667

先日Scrapbox記法をMarkdownに変換するライブラリをRustで書いたという記事を書いた。

このライブラリは当初CLIとして使うことを想定していた。しかしせっかくRustで書いたのでWASMを生成してフロントエンドから動かせるようにしてみた。できたのは下記のページ。

Scrapboxのテキストを入力して変換するボタンを押すとMarkdownが生成される。

今回はこれを作る過程でNext.jsでWASMを動かすというのができたので大まかなやり方を書き残しておく。ざっくりとした手順としては下記。

• WASMファイルをNext.js内に配置
• next.config.jsの設定
• dynamic importを使ってWASMを読み込む

実際にやってみるとわかるがとても簡単。

WASMファイルの配置

Rustからwasmの生成にはwasm-packを使った。これを使うとbg.wasmとかbg.wasm.d.tsなどのファイルが生成される。RustからWASMを生成する方法についてはCompiling from Rust to WebAssembly - WebAssembly | MDNあたりの記事を読んでみると良い。

wasm-packでwasm-pack build --target web --releaseをして生成したファイル群は下記のようになっているはず。

 ├── package.json
 ├── sb2md_converter.d.ts
 ├── sb2md_converter.js
 ├── sb2md_converter_bg.wasm
 └── sb2md_converter_bg.wasm.d.ts

これら全てをNext.jsのソースコードのルートに配置する。自分の場合はsrc/の中にresources/wasm/というディレクトリを作ってファイルを丸ごと入れた。こんな感じ→https://github.com/YuheiNakasaka/personal-site/tree/master/src/resources/wasm

next.config.jsの設定

次にwebpackの設定。webpack5から導入された実験的機能の中にWASMファイルを同梱してくれるオプションがあるのでそれを使う。

next.config.jsにはこんな感じで書いておけばOK。

 module.exports = {
   webpack: (config, { isServer }) => {
     config.experiments = {
    	  asyncWebAssembly: true,
       layers: true,
     };
     config.output.webassemblyModuleFilename = (isServer ? "../" : "") + "static/wasm/[modulehash].wasm";
     return config;
   }
 }