Use WebAssembly module compiled with Emscripten in Next JS

With the help of @lab I realized my approach was wrong. This is the way I made my WASM module work:

1. This is my hello.cpp file. Important notice the extern "C" {} block:

#include <math.h>

extern "C" {

int int_sqrt(int x) {
  return sqrt(x);
}

}

2. I compile using em++ the destination is the public folder in next. We need to serve the .wasm and .js statically like @lab pointed out:

em++ hello.cpp -o "../v2/public/wasm/test.js" -s MODULARIZE -s WASM=1 -s EXPORT_NAME="SZU" -s ENVIRONMENT="web" -s EXPORTED_FUNCTIONS=_int_sqrt -s EXPORTED_RUNTIME_METHODS=ccall,cwrap

2. I load the Emscripten generated js file using the next/script tag like so:

<Script src="/wasm/test.js" strategy='beforeInteractive'/>

3. In the Component I want to use my WASM module I load it inside the next/useEffect hook, wrap it with Emscripten cwrap and store the function in a reference object using next/useRef like so:

useEffect(() => {
    if(typeof (window as any).SZU === 'function' && WASM.current === null){
        console.log("loading WASM!");
        (window as any).SZU()
            .then((wasm: WASM) => {
                console.log("got WASM!");
                WASM.current = wasm;
                int_sqrt.current = WASM.current.cwrap("int_sqrt", "number", ["number"]);
            });
    }
}, []);

4. I can call the function later like so:

console.log(`Square root of 16 is ${int_sqrt.current(16)}`);

I hope this helps someone who had the same problem.