Using WebAssembly (Wasm)

WebAssembly, or Wasm, is a portable, low-level, assembly-like language that can be used as a compilation target for languages like C, Go, and Rust. Wasm was built to run more efficiently on the web and alongside JavaScript, so that it runs in most JavaScript virtual machines.

With Vercel, you can use Wasm in Vercel Functions or Routing Middleware when the runtime is set to edge, nodejs, or bun.

Pre-compiled WebAssembly can be imported with the ?module suffix. This will provide an array of the Wasm data that can be instantiated using WebAssembly.instantiate().

You can use Wasm in your production deployment or locally, using vercel dev.

1. Get your Wasm file ready

   • Compile your existing C, Go, and Rust project to create a binary .wasm file. For this example, we use a rust function that adds one to any number.
   • Copy the compiled file (in our example, add.wasm) to the root of your Next.js project. If you're using Typescript, add a ts definition for the function such as add.wasm.d.ts.

2. Create an API route for calling the Wasm file

   With nodejs runtime that uses Fluid compute by default:

   api/wasm/route.ts

   import path from'node:path';
   import fs from'node:fs';
   importtype*as addWasmModule from'../../../add.wasm'; // import type definitions at the root of your project
   
   constwasmBuffer=fs.readFileSync(path.resolve(process.cwd(),'./add.wasm')); // path from root
   constwasmPromise=WebAssembly.instantiate(wasmBuffer);
   
   exportasyncfunctionGET(request:Request) {
   consturl=newURL(request.url);
   constnum=Number(url.searchParams.get('number') ||10);
   const { add_one: addOne } = (awaitwasmPromise).instance
    .exports astypeof addWasmModule;
   
   returnnewResponse(`got: ${addOne(num)}`);
   }

3. Call the Wasm endpoint

   • Run the project locally with vercel dev
   • Browse to http://localhost:3000/api/wasm?number=12 which should return got: 13