如何通过Emscripten在Next.js中正确集成WASM？

核心问题分析 #

你遇到的WASM文件路径错误，本质是Emscripten生成的JS默认会从当前脚本所在目录加载WASM，但Next.js的webpack打包逻辑会改变资源的存放路径，导致两者不匹配。下面提供两种规范的解决方式：

方式一：将WASM嵌入到JS文件（适合小型WASM） #

直接让Emscripten把WASM文件转成Base64嵌入到生成的JS中，彻底避免路径问题：

1. 调整Emscripten编译命令
   添加-sSINGLE_FILE=1参数，同时必须明确导出你的C函数和需要用到的Emscripten运行时方法：

emcc your_cpp_code.cpp -o main.js \
  -sENVIRONMENT='web' \
  -sMODULARIZE=1 \
  -sEXPORT_NAME='Solver' \
  -sSINGLE_FILE=1 \
  -sEXPORTED_FUNCTIONS=['_myfunction'] \
  -sEXPORTED_RUNTIME_METHODS=['cwrap']

注意：C函数名前需要加下划线_，这是Emscripten的默认命名规则。

2. 组件中直接使用
   你的原有组件代码可以保持不变，因为不再需要加载单独的WASM文件：

import Solver from '@/wasm/main';

export default function WasmComponent() {
    const handleClick = async () => {
        const Module = await Solver();
        const test = Module.cwrap("myfunction", "string", ["string"]);
        console.log(test("test"));
    }
    
    return (
        <button variant="contained" onClick={handleClick}>Call the WASM Function!</button>
    )
}

方式二：保留独立WASM文件（适合大型WASM） #

通过配置Next.js的webpack处理WASM资源，并告诉Emscripten正确的加载路径：

1. 调整Next.js配置（next.config.mjs）
   修改webpack规则，让它正确处理WASM文件并指定输出目录：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // 仅在客户端处理WASM文件
    if (!isServer) {
      config.module.rules.push({
        test: /\.wasm$/,
        type: 'asset/resource',
        generator: {
          filename: 'static/wasm/[name].[hash][ext]'
        }
      });
    }
    return config;
  },
};

export default nextConfig;

2. 组件中指定WASM加载路径
   导入WASM文件，并在初始化Module时通过locateFile函数指定正确的资源URL：

import Solver from '@/wasm/main';
import wasmAsset from '@/wasm/main.wasm';

export default function WasmComponent() {
    const handleClick = async () => {
        const Module = await Solver({
          // 告诉Emscripten从webpack处理后的URL加载WASM
          locateFile: () => wasmAsset.src
        });
        const test = Module.cwrap("myfunction", "string", ["string"]);
        console.log(test("test"));
    }
    
    return (
        <button variant="contained" onClick={handleClick}>Call the WASM Function!</button>
    )
}

3. 确保Emscripten编译参数正确
   编译时仍需导出必要的函数和运行时方法，无需额外修改路径参数：

emcc your_cpp_code.cpp -o main.js \
  -sENVIRONMENT='web' \
  -sMODULARIZE=1 \
  -sEXPORT_NAME='Solver' \
  -sEXPORTED_FUNCTIONS=['_myfunction'] \
  -sEXPORTED_RUNTIME_METHODS=['cwrap']

为什么手动放public文件夹不规范？ #

Next.js的webpack会自动处理静态资源的哈希命名、缓存策略和路径映射，手动放置的文件无法享受这些优化，在生产环境部署时可能出现路径失效、缓存问题，同时不符合Next.js的资源管理规范。

内容的提问来源于stack exchange，提问作者Benjamin Gilbert