Integrate excalibur with next.js

[EduardoHidalgo]

Im curious about some approach to develop a web made with next.js and using excalibur internally.

Next.js it's a good solution for PWA, SSR and web development. While next.js solves architectural problems and makes it easy to deliver a web product, excalibur serves as the engine to get the hard work done. I think this combination could be very powerful.

Unfortunately I have not been able to integrate both successfully.

[eonarheim]

@EduardoHidalgo

I'm not as familiar with the next.js API, but after some very brief and uneducated looking it should be possible to use Excalibur with it.

Possibly wrapping an Excalibur game in a React component would satisfy next.js? I will differ to @kamranayub's experience in this area in relation to React and next.js. We've done similar-ish work wrapping Excalibur to support Storybook stories, which might help? https://github.com/excaliburjs/Excalibur/tree/main/src/stories

The tricky bit might be figuring out how to get the next static resources to line up with how Excalibur loads resources, but theoretically they are just files, and as long as you feed the image or sound path to Excalibur that would work in a next.js component it should work.

The PWA aspect to this could be very cool, especially to support running games offline with all their image/sound resources cached. I'd be very interested in anything you produce!

[kamranayub]

Right, should be possible. Ultimately what needs to happen is to start Excalibur on a target canvas element I think. I'd guess you may need to ensure the Next page is static, not rendered on the server or at least not to accidentally call start on the server.

I think it'd help to see what you have so far to tinker with. Asset paths could be an issue but I think Next has special Static Asset path routing.

[EduardoHidalgo]

I'm going to give it another try with your insights @eonarheim. If I can produce an successful next.js + excalibur environment I will share it over here (:

[kamranayub]

I'm using React to do all my game UI, but I'm doing it without a framework like Next. I think you'll need a canvas element to give an ID and pass to Excalibur. Keep in mind Excalibur only works on the client and on a single page, you wouldn't really use any routing or anything with Next that could interface with Excalibur.

[kamranayub]

Hey @EduardoHidalgo (and anyone else), here's an example of using Excalibur with Next. Since Excalibur can only execute on the client, it needs to be loaded via useEffect and a dynamic import otherwise Next will attempt to run the module in SSR. Unfortunately, right now we don't check for window existence so it bombs in SSR.

https://codesandbox.io/s/next-excalibur-5b18x?file=/game/game.js

FYI, this is still an issue in 0.24.5 which is exacerbated by HMR: #1431

Could workaround by clearing the element by tag name/query selector when effect runs.