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 Edge Functions or Edge Middleware.

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';
   import type * as addWasmModule from '../../../add.wasm'; // import type definitions at the root of your project
    
   const wasmBuffer = fs.readFileSync(path.resolve(process.cwd(), './add.wasm')); // path from root
   const wasmPromise = WebAssembly.instantiate(wasmBuffer);
    
   export async function GET(request: Request) {
     const url = new URL(request.url);
     const num = Number(url.searchParams.get('number') || 10);
     const { add_one: addOne } = (await wasmPromise).instance
       .exports as typeof addWasmModule;
    
     return new Response(`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