project_setup: description: Setup Rust and Next.js to compile Rust to WASM for web use prerequisites: - Node.js >= 18 - Rust >= 1.70 - wasm-pack installed (`cargo install wasm-pack`) - Next.js app created (`npx create-next-app@latest`) - Optional: TypeScript enabled steps: - name: Create Rust crate run: | mkdir rust-wasm cd rust-wasm cargo new --lib wasm_core cd wasm_core - name: Add wasm dependencies to Cargo.toml file: rust-wasm/wasm_core/Cargo.toml append: dependencies: wasm-bindgen: "0.2" [lib]: crate-type: ["cdylib"] [package.metadata.wasm-pack.profile.release] wasm-opt: true - name: Write simple Rust function file: rust-wasm/wasm_core/src/lib.rs content: | use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn greet(name: &str) -> String { format!("Hello, {}!", name) } - name: Build WASM module with wasm-pack run: | cd rust-wasm/wasm_core wasm-pack build --target web --out-dir ../pkg nextjs_setup: description: Integrate the WASM output into a Next.js app steps: - name: Move compiled WASM pkg to Next.js public or static run: | # Assuming your Next.js app is in ../my-app mkdir -p ../my-app/public/wasm cp -r ../rust-wasm/pkg/* ../my-app/public/wasm/ - name: Import and initialize WASM in React file: my-app/app/page.tsx content: | 'use client'; import { useEffect, useState } from "react"; export default function Home() { const [output, setOutput] = useState(""); useEffect(() => { (async () => { const wasm = await import("../../public/wasm/wasm_core.js"); await wasm.default(); // init const result = wasm.greet("Next.js + Rust"); setOutput(result); })(); }, []); return