how do I import my webassembly into nextjs

Question

as you can see in the picture I copied the contents of pkg to the public nextjs projects folder. The nextjs app is initialized inside my rust lib project.

[package]
name = "chess"
version = "0.1.0"
edition = "2021"

[lib]
crate-type=["cdylib"]

[dependencies]
wasm-bindgen="0.2"
js-sys="0.3.45"

[dependencies.web-sys]
version = "0.3.69"
features = [
    "Window",
    "Document",
    "HtmlCanvasElement",
    "CanvasRenderingContext2d",
    "Element",
    "Node",
    "Event",
    "MouseEvent"
]

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct Board{
    width: i32,
    height: i32,
}

#[wasm_bindgen]
impl Board {
    pub fn init(x: i32, y: i32) -> Board {
        Board {
            width: x,
            height: y,
        }
    }

    pub fn draw(&self, canvas: web_sys::CanvasRenderingContext2d) {
        canvas.set_fill_style(&JsValue::from_str("black"));
        canvas.set_stroke_style(&JsValue::from_str("white"));
        let size: f64 = 64.0;
        for i in 0..self.width {
            for j in 0..self.height {
                let x: f64 = i as f64;
                let y: f64 = j as f64;
                canvas.fill_rect(x*size, y*size, size, size);
                canvas.stroke_rect(x*size-5.0, y*size-5.0, size-10.0, size-10.0);
            }    
        }
    }
}

what I intend to do is use the Board struct to initialize and draw a board on my canvas by

// Get the canvas element and its 2D context
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    // Create a new instance of the Board with width 10 and height 10
    const board = Board.init(10, 10);

    // Call the draw method on the Board instance to draw the grid
    board.draw(context);

but I seem to not find a way to use the files I generated with wasm-pack build

Answer 1

Notice the package.json file in the /pkg folder. Run npm install ../pkg , and then try running it. This will allow you to import the WASM binaries directly with types instead of fetching it...