如何将Rust编译的WebAssembly模块导入Next.js项目并解决相关报错

API 探路者

2026-10-4

问题原因

你在next.config.js根节点配置的experiments不生效，Next.js 不会读取根节点下的webpack实验配置，所有webpack相关的自定义规则都需要通过next.config.js的webpack配置字段注入到内置webpack规则中。同时你没有为wasm文件配置对应的模块匹配规则，webpack无法识别来自本地依赖的wasm模块。

解决方案

1. 修改next.config.js配置

替换你的next.config.js内容为如下配置：

module.exports = {
  reactStrictMode: true,
  webpack(config) {
    // 合并原有实验配置，开启异步WebAssembly支持
    config.experiments = {
      ...config.experiments,
      asyncWebAssembly: true,
      topLevelAwait: true
    };
    // 为wasm文件配置专属模块类型
    config.module.rules.push({
      test: /\.wasm$/,
      type: "webassembly/async"
    });
    // 排除wasm文件被Next.js默认静态资源规则处理
    config.module.rules.forEach(rule => {
      if (rule.type === "asset/resource") {
        rule.exclude = Array.isArray(rule.exclude) ? rule.exclude : [];
        rule.exclude.push(/\.wasm$/);
      }
    });
    return config;
  }
}

2. 调整WASM模块导入方式

异步WebAssembly不支持顶部同步导入，需要改为动态异步导入，示例如下：

import { useEffect, useState } from "react";

export default function Page() {
  const [greet, setGreet] = useState(null);

  useEffect(() => {
    const loadBackend = async () => {
      const backendModule = await import("backend");
      setGreet(() => backendModule.greet);
    };
    loadBackend();
  }, []);

  return <div>{greet ? greet() : "模块加载中"}</div>;
}

如果需要用顶层await导入，确保你项目的JS/TS文件配置了支持ES模块顶级await语法即可。