nextjs 使用 wasm,如何在 Next.js 中使用 Rust 编写的 WebAssembly,使用 wasm-bindgen 构建 wasm 文件提供给 js 调用
本教程分享如何使用 Rust + wasm-bindgen 打包生成 WebAssembly (WASM) 模块,并在 Next.js 前端项目中调用。
作为示例,我们会用 Rust 的 hex
库实现一个简单的字符串 hex 编码和解码逻辑,并将其暴露给 JavaScript 调用。
✅ 完整示例仓库: https://github.com/wangshu-g/nextjs-rust-wasm-example
项目整体思路
- Rust 实现核心逻辑(字符串转 hex、hex 转字符串)
- 使用
wasm-bindgen
打包生成 wasm 和 JS glue 代码 - 在 Next.js 前端通过导入自动生成的 JS 包调用 wasm 函数
Rust 部分:安装依赖 & 编写核心逻辑
Cargo.toml
Rust 项目只需要添加两个依赖:hex
和 wasm-bindgen
。
需要注意的是:必须指定 crate-type
为 cdylib
,这样才能编译为 WebAssembly。
复制
[package]
name = "rust-wasm"
version = "0.1.0"
edition = "2024"
[dependencies]
hex = "0.4"
wasm-bindgen = "0.2"
[lib]
crate-type = ["cdylib"]
[profile.release]
opt-level = 3
lto = true
codegen-units = 1
panic = "abort"
Rust 源代码(src/lib.rs)
添加 #[wasm_bindgen]
注解,让函数可以被 JavaScript 调用:
复制
extern crate hex;
use hex::{decode, encode};
use wasm_bindgen::prelude::wasm_bindgen;
#[wasm_bindgen]
pub fn get_hex(text: &str) -> String {
encode(text)
}
#[wasm_bindgen]
pub fn restore_hex(text: &str) -> String {
String::from_utf8(decode(text).unwrap()).unwrap()
}
编译 Rust 为 WebAssembly
使用 wasm-pack
打包:
复制
wasm-pack build --target web --release
打包完成后,会生成一个 pkg
文件夹,里面包含:
.wasm
文件- 初始化脚本(如
rust_wasm.js
) - TypeScript 类型声明文件
将 pkg
文件夹复制到 Next.js 前端项目中(例如:/src/pkg/
)。
Next.js 部分:在前端调用 wasm 函数
不需要任何复杂配置,只需导入 wasm 包并初始化。
复制
import React, {useCallback, useEffect, useState} from "react";
import __wbg_init, {get_hex} from "@/pkg/rust_wasm";
const divStyle = {color: "white", padding: 20}
const textareaStyle = {width: "100%", height: 300, border: "1px solid #fff", padding: 20}
export default function WasmPage() {
const [hex, setHex] = useState<string>("")
useEffect(() => {
async function func() {
if (typeof window !== "undefined" && typeof document !== "undefined") {
__wbg_init().then(() => {
console.log("wasm load end")
setHex(get_hex("hello world"))
})
}
}
func()
}, []);
const handleChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>((e) => {
setHex(get_hex(e.target.value))
}, [])
return <div style={divStyle}>
原始字符串
<br/>
<br/>
<textarea defaultValue={"hello world"} style={textareaStyle} placeholder={"输入文本"} onChange={handleChange}/>
<br/>
<br/>
通过 wasm 调用 rust hex::encode
<br/>
<br/>
<textarea readOnly style={textareaStyle} placeholder={"hex by rust wasm"} value={hex}/>
</div>
}
- 初始化:调用自动生成的
__wbg_init()
,加载 wasm 文件 - 调用:直接使用
get_hex()
函数
小结
通过 wasm-bindgen
+ wasm-pack
,可以很方便地将 Rust 打包为 WebAssembly 并在 Next.js(甚至任何前端框架)中调用。
这种方式既能复用 Rust 的性能优势,也能让前端开发流程保持简单。
✅ 完整示例仓库地址: https://github.com/wangshu-g/nextjs-rust-wasm-example
作者:https://blog.xn--rpv331d.com/望舒
链接:https://blog.xn--rpv331d.com/望舒/blog/53
转载注意保留文章出处...
No data