react-unity-webgl in Next.js project not working

[brooklee]

I am trying to get this code working in a Next.js build, however the game does not load on the page and I get no errors in the console So I am just at a loss on why the game won't load.

I am using

unity: 2021.3.16f1, (to export game)

"next": "^13.1.6",

"react": "^18.2.0",

"react-unity-webgl": "^9.4.0"

here is the code:

import { Unity, useUnityContext } from 'react-unity-webgl';

export default function GamesPage() {
  const { unityProvider } = useUnityContext({
    loaderUrl: '/testBuildThree/Build/testBuildThree.loader.js',
    dataUrl: '/testBuildThree/Build/testBuildThree.data',
    frameworkUrl: '/testBuildThree/Build/testBuildThree.framework.js',
    codeUrl: '/testBuildThree/Build/testBuildThree.wasm',
  });

  return (
    <div>
      <p>Game</p>
      <Unity
        unityProvider={unityProvider}
        style={{ width: 800, height: 600, border: 'solid black 1px' }}
      />
    </div>
  );
}

and here is a screen shot of my folder build in my static folder

Here is a screenshot of what the page does load.

[brooklee]

So I think this had something to do with my previous build I started a fresh build from next.js using the create-next-app command npx create-next-app@latest --typescript and it works just fine.

[ItsJackAnton]

I am running into this issue, any idea of how to solve it?

[rama142694]

hey! im also using nextjs with typescript and im having this problem

i try to re make the project like you do but is still hapening. Any ideas what it could be?

[rama142694]

trying several times i achieve to know a little bit more of where the problem is and it has something to do with the next js new app folder for routing. With the pages folder it works correct