GET net::ERR_ABORTED 404 (Not Found) Unity resource could not be load in Next.js application

[IronDumpling]

I recently just learned React and want to use React-Unity-WebGL to create an application.

I created a new Next.js application using the command:

npx create-next-app

Then I started to modify this project to add Unity WebGL components to it. The way I loaded the Unity is like this, noting that I am using TypeScript:

const unityConfig = { loaderUrl: "build/unity.loader.js", dataUrl: "build/unity.data", frameworkUrl: "build/unity.framework.js", codeUrl: "build/unity.wasm", };

const { unityProvider, isLoaded, sendMessage, loadingProgression, addEventListener, removeEventListener } = useUnityContext(unityConfig as UnityConfig);

<Unity className="unity" unityProvider={unityProvider} />

However, when I ran the project using the command:

npm run dev

And open the project in the localhost, it gave me this error:

And in the website, all other components are rendered correctly, only the Unity WebGL canvas is missing.

The referred code line is this:

// Add script to window.document body. window.document.body.appendChild(script);

May I ask how to solve this error? Is it related to the Next.js application framework?

Thanks for your help!

[YutongZhuu]

did you find a solution?